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 the 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 property names in methods option will overwrite the reserved methods (e.g. $watch). In this case, Vue outputs a warning message.

Note: The application of this rule is limited to projects using Vue 2.x version.

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' }
      ]
    };
  },
  methods: {
    $watch() { // VUE_RESERVED_PROPERTY_IN_OPTION alarm because the '$watch' 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' }
      ]
    };
  },
  methods: {
    watchData() {
      // do something
    }
  }
}
</script>

Version

This rule was introduced in DeepScan 1.15.0-beta.

See

• Instance Properties

• Instance Methods / Data

• Instance Methods / Events

• Instance Methods / Lifecycle

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