Read-only property of Vue should not be assigned

VUE_ASSIGN_TO_READONLY_PROPERTY
Error
Medium
vue

This rule applies when a value is assigned to the read-only properties of Vue.

The read-only properties of Vue are as follows:

$data
$props
$el
$options
$parent
$root
$slots
$refs
$attrs
app.config

Assignment to the above properties will be ignored or may cause an unintended behavior. Also, Vue outputs a warning message.

-Noncompliant Code Example
+Compliant Code Example
 <script>
 export default {
   data() {
     return { msg: '' };
   },
   mounted() {
-    this.$data = { msg: 'hi' }; // VUE_ASSIGN_TO_READONLY_PROPERTY alarm because 'this.$data' is read-only.
+    this.msg = 'hi'; // Use nested data properties instead.
   }
 }
 </script>

Noncompliant Code Example

View with compliant examples side by side

<script>
export default {
  data() {
    return { msg: '' };
  },
  mounted() {
    this.$data = { msg: 'hi' }; // VUE_ASSIGN_TO_READONLY_PROPERTY alarm because 'this.$data' is read-only.
  }
}
</script>

Compliant Code Example

View with noncompliant examples side by side

<script>
export default {
  data() {
    return { msg: '' };
  },
  mounted() {
    this.msg = 'hi'; // Use nested data properties instead.
  }
}
</script>

Version

This rule was introduced in DeepScan 1.16.0-beta.

See

Component Instance Properties
Application API: app.config
[Vue warn]: Attempting to mutate public property "$data". Properties starting with $ are reserved and readonly.
[Vue warn]: app.config cannot be replaced. Modify individual options instead.

Was this documentation helpful?