[Vuejs]-How to make a sample that shows the 'Props are overwritten when re-rendering' anti pattern

In your example you are actually not mutating the prop, because what you send in to the child is a reference to an object. This reference stays the same. See what happens if you change the template code in your child to:

"<button @click=\"obj = {}\">Change text in child ({{obj.text}})</button>"

Then you will see that the prop is overwritten and the value of the child differs from that in the parent. When the parent updates the value, the updated value in the child will be overwritten. Which can cause serious and hard to find bugs. Therefore use emit in the child to update the value in the parent, which will update the child value through the prop.

If you have a lot of these props and emits, you should look into using a store like Pinia.