Vue option's property name should not be a reserved name of Vue

• VUE_RESERVED_PROPERTY_IN_OPTION
• Error
• Medium
• vue

This rule applies when reserved names of Vue are used as Vue option's property names.

If Vue's reserved name is used as user-defined property name, unintended behaviors may occur as follows:

1. Reserved property names in data or computed option will be ignored (e.g. $options).
2. Reserved attribute names in props option will be ignored (e.g. key).
3. Reserved property names in methods option will overwrite the reserved methods (e.g. $watch).

For cases 2 and 3 above, Vue outputs warning messages.

Noncompliant Code Example

<script>
export default {
  data() {
    return {
      $options: [ // VUE_RESERVED_PROPERTY_IN_OPTION alarm because the '$options' property is predefined in a Vue instance.
        { id: 'opt1', name: 'my option 1' },
        { id: 'opt2', name: 'my option 2' }
      ]
    };
  },
  props: {
    key: { // VUE_RESERVED_PROPERTY_IN_OPTION alarm because the 'key' attribute is one of special attributes of Vue.
      type: String,
      required: true
    }
  },
  methods: {
    $watch() { // VUE_RESERVED_PROPERTY_IN_OPTION alarm because the '$set' method is predefined in a Vue instance.
      // do something
    }
  }
}
</script>

Compliant Code Example

<script>
export default {
  data() {
    return {
      optionsData: [
        { id: 'opt1', name: 'my option 1' },
        { id: 'opt2', name: 'my option 2' }
      ]
    };
  },
  props: {
    keyProp: {
      type: String,
      required: true
    }
  },
  methods: {        
    watchData() {
      // do something
    }
  }
}
</script>

Version

This rule was introduced in DeepScan 1.15.0-beta.

See

• Vue instance properties

• Vue instance data methods

• Vue instance event methods

• Vue instance lifecycle methods

• Vue special attributes

• [Vue warn]: Method $watch conflicts with an existing Vue instance method. Avoid defining component methods that start with _ or $.

• [Vue warn]: key is a reserved attribute and cannot be used as component prop.