Is it valid to mutate an array prop in a child component?

Question

I've noticed when pushing to an array that has been passed to a child component as prop, I don't get the usual 'Avoid mutating a prop directly' error. After thinking about it, this makes sense because the array is a reference and if something causes the parent to re-render, the child will render correctly because of this.

Is the proper approach still to emit to the parent and have the parent operate on the array, or is it perfectly valid to operate on the array in the child component since it is a reference?

Answer 1

According to the official docs on props :

Note that objects and arrays in JavaScript are passed by reference, so if the prop is an array or object, mutating the object or array itself inside the child component will affect the parent state and Vue is unable to warn you against this. As a general rule, you should avoid mutating any prop, including objects and arrays as doing so ignores one-way data binding and may cause undesired results.