Vue.js 2 Design Patterns and Best Practices

Children mutating props – Anti-pattern

It's important that we won't modify props inside our child components. Props should be considered the source of truth when passed down to a component and thus, change the value from within a child component is typically bad practice. There are some unique case scenarios however where it may be appropriate to do so, like when using the .sync modifier to achieve two-way data binding.

If we use our previous example and change the todos prop from within the child, we'll get a warning inside the console:

methods: {  completeTodo(todo) {    this.todo = [{id: 1, name: 'Do the dishes.'}];    this.$emit('completeTodo', todo)  }}