Vue.js 2 Design Patterns and Best Practices

Using data as an object - Anti-Pattern

When creating components with Vue, it's important that the data option is a function that returns a new object holding data, rather than just a plain data object.

If you simply use a data object that's not a function, all instances of the component will share the same data. This is bad because as you may be able to imagine, all instances of the component will be updated with the same data any time it changes. It's important to ensure that each component is capable of managing its own data rather than sharing data across the board.

Let's take a look at the problem:

data: { recipeList: [], selectedCategory: 'Desserts'}

We can fix this by doing this instead:

data () { return {  recipeList: [], selectedCategory: ...