Vue.js 2 Design Patterns and Best Practices

What should we do instead?

If you want to work with the prop inside the child component, it's best to save the prop as a new variable inside the data option. This allows you to then mutate a new version of the prop, local to this component:

export default {  props: {    age: {      type: Number,    }  },  data() {    return {      personAge: this.age    }  },}

We can then access and mutate personAge without worrying about any side effects. Another example can be seen when creating a filterable search box, where instead of mutating the prop directly, make a computed property that performs the required functions:

export default {  props: {    filter: {      type: String,    }  },  computed: {    trimFilter() {      return this.filter.trim().toLowerCase()    }  }}