Props are mutable in the template

[quiteeasy]

Vue version

3.4.23

Link to minimal reproduction

https://play.vuejs.org/#eNp9U8tu2zAQ/JUFL5ZhQ2rRngzZ6AM5tEDboC3QQ5mDIq0dJhRJ8GE7MPzvWZKR8oDjG7kzuzO7Sx7YZ2PKbUC2YLVrrTAeHPpgVlyJ3mjr4avuDayt7mFSVvES6ZMRPlhcHx/xDABw1WrlPLQ6KA9LIErxbspVXWUJKk4Xj72RjUe6AdRJZmGWnKUszqAioK5GFpsz76juWmzKW6cVOT4kMUrojZBofxkvSJezBSQkYo2Uevc9xbwNOB/i7Q22dyfit24fY5xdWnRot8jZiPnGbpCcRfjiz0/c03kEe90FSewz4G90WoboMdO+BNWR7We85PZbGqxQm7/uYu9RuaGpaDQyj4nPGY07Tu2t1p/sfig/pjyujjTFYYcnVp7XZqw2jtbW4VoovIy34v/ETK5ohQOnD56W8k/4m4QTu5jCcpXVU4HSzGYkeH7rndimA8Q3AttGBqQODmDILaVGoL626Snkc/BeK/jUStHe0VsxJGxgBu85W/1IliD6AaFgECqUhl1jFQ10nlSy9W5aV7naWPuMzqt2X6ntKA5N26JzpPI4P7KQ+y7udSCKlDRmhOalmRRX2sM1njZWV3lGz34CV+z4AOxwP/s=

Steps to reproduce

1. Click on the Mutate Prop in the template(no warning, ref mutated) button
2. Click on the Mutate Prop with accessing props in the script(you will see a warning, the ref will not be mutated) button

What is expected?

Both attempts to mutate the prop shows warning and block mutating

What is actually happening?

the Mutate Prop in the template(no warning, ref mutated) button mutates the prop without any warnings

System Info

No response

Any additional comments?

I would like to submit two possible pull requests (PRs):

1. For the main branch:
   • Introduce a temporary warning when attempting to mutate data from the main branch.
   • This warning will serve as an interim solution until a more permanent fix is implemented to prevent unintended data mutations.
2. For the minor branch:
   • Implement a fix that blocks data mutations from the minor branch.
   • This fix will prevent unintended data changes, similar to the existing protection against mutating data from scripts.
   • Note: This change may break existing functionality for users who directly mutate props in the template. We should communicate this potential breaking change and guide the new recommended practices.

This approach addresses the issue on both branches, providing a short-term warning for the main branch while implementing a comprehensive solution for the minor branch. However, the fix for the minor branch may require additional documentation and migration efforts due to the potential breaking change.

Looking forward to the feedback from the team.

[skirtles-code]

I think this may be the same problem described by #8216.

[quiteeasy]

I think this may be the same problem described by #8216.

Yes, this seems to be the same issue described in #8216. The PR from #8216 will prevent mutating props passed to child components in development mode. However, it appears to be problematic for production, as the state update will be asynchronous(parent and child states are not synced), as demonstrated in the reproduction link from #8216.

Should we consider disallowing the mutation of props passed to child components in the next minor release to avoid such issues?