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
$children
$slots
$scopedSlots
$refs
$isServer
$attrs
$listeners
Vue.config (Vue 2.x) or app.config (Vue 3.x)

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

Vue instance properties
Vue.config API
[Vue warn]: Avoid replacing instance root $data. Use nested data properties instead.
[Vue warn]: $props is readonly.
[Vue warn]: Error in mounted hook: TypeError: Cannot set property $isServer of #<Vue> which has only a getter
[Vue warn]: $attrs is readonly.
[Vue warn]: $listeners is readonly.
[Vue warn]: Do not replace the Vue.config object, set individual fields instead.

Was this documentation helpful?