Rule Definition
When the value of data is an object, it’s shared across all instances of a component.
We might want to reuse this component, allowing users to maintain multiple lists (e.g. for shopping, wishlists, daily chores, etc). Since every instance of the component references the same data object, changing the title of one list will also change the title of every other list. The same is true for adding/editing/deleting a todo.
Instead, we want each component instance to only manage its own data. For that to happen, each instance must generate a unique data object.
Remediation
Ensure to return objects from data properties
Violation Code Sample
Vue.component('some-comp', {
data: {
foo: 'bar'
}
})
Fixed Code Sample
Vue.component('some-comp', {
data: function () {
return {
foo: 'bar'
}
}
})
Reference
https://vuejs.org/v2/style-guide/#Component-data-essential
Related Technologies
Technical Criterion
Programming Practices - Modularity and OO Encapsulation Conformity
About CAST Appmarq
CAST Appmarq is by far the biggest repository of data about real IT systems. It's built on thousands of analyzed applications, made of 35 different technologies, by over 300 business organizations across major verticals. It provides IT Leaders with factual key analytics to let them know if their applications are on track.