Vue version

3.2.45

Link to minimal reproduction

https://stackblitz.com/edit/angular-4adaez?file=src%2FChild.vue,src%2FApp.vue

Steps to reproduce

Following the link nothing really is necessary other that opening the console. You will see an error whith the following message

Maximum recursive updates exceeded in component

What is expected?

When the child component is loaded, the watch for the props source should load once, in it's triggering it updates the modelValue props with an emit. After that event it should stop.

What is actually happening?

Right now, when the emit is fired, in the parent component every props hard coded in the template is recalculated and that triggers the watcher of the child because it detects it as a new object. I think the problem is becasue VueJs recalculate the source props everytime and update arrives.

System Info

No response

Any additional comments?

No response

Your analysis is correct, but this is expected behavior. You send a new object as source on every parent re-render, so the watch triggers again and again.

Solution: move the source object to your script block so it stays consistent.

If you need help, ask in the "Discussions" Section of this repo or ask on chat.vuejs.org