JS.VUE.NO.SHARED.COMPONENT.DATA

When using the data property on a component (i.e. anywhere except on new Vue), the value must be a function that returns an object.

Rule Details

When the value of data is an object, it’s shared across all instances of a component.

{'vue/no-shared-component-data': ['error']}

<script>
/* GOOD */
Vue.component('some-comp', {
  data: function () {
    return {
      foo: 'bar'
    }
  }
})

export default {
  data () {
    return {
      foo: 'bar'
    }
  }
}
</script>

{'vue/no-shared-component-data': ['error']}

<script>
/* BAD */
Vue.component('some-comp', {
  data: {
    foo: 'bar'
  }
})

export default {
  data: {
    foo: 'bar'
  }
}
</script>

Options

Nothing.

Further Reading

• Style guide (for v2) - Component data (https://v2.vuejs.org/v2/style-guide/#Component-data-essential)
• API - data (https://v3.vuejs.org/api/options-data.html#data-2)
• API (for v2) - data (https://v3.vuejs.org/api/options-data.html#data-2)