`watch()` not triggered when watching component props and mutating nested reactive object

[huang-julien]

Vue version

3.4.2 - 3.4.3 - latest (local 24d77c2)

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-rtqam5?file=package.json,src%2Fcomponents%2FHelloWorld.vue&terminal=dev

Steps to reproduce

• click on count is: { count: 0 }

see thread

What is expected?

• in the console, you should have a log.

What is actually happening?

• nothing

System Info

No response

Any additional comments?

• nuxt CI : chore(deps): update all non-major dependencies (main) nuxt/nuxt#24951
  It seems like that watching props does not work either see the workaround there
  fix(nuxt): workaround deep watch due to vue 3.4.2 nuxt/nuxt#24986

cc @danielroe

[LinusBorg]

I'm not sure if I understand the issue.

When you watch a ref without deep: true, then is should only be triggered when you re-assign the ref, not when you update a deeply nested reactive value. That's how it should work in my understanding, and that's what I'm seeing here.

The docs mention only one specific case where we do a deep watch by default, and what's when watching a reactive() object.

The note at the end about props not "working" would need its own reproduction. It works fine here:

https://play.vuejs.org/#eNqFUstOwzAQ/BXjS1qpJEK9lbQSoErAASpA4oA5VMk2dXFsy3bSSlH+nbVD+pCg3Lwz4/Wsdxp6o3VcV0AnNLWZ4doRC67SMyZ5qZVxpCEGVqQlK6NKEqE02lN3qtQ/eJz4wndCmslMSetIaQsy9dcH0T0Ioci7MiK/iIZMpkn3Gr6DhYNSi6UDrAhJ11ezpgmX2zZNsAool7pypL4sVQ5iyijyjJKkI4OTCUI9MUuDIWTT5Kg7HVFn0dyKF/HGKoljN74BoxmquQDzrB1H84xOSGA8t0Tv28eAOVPBqMezNWRfv+Abu/MYowsDFkwNjO45tzQFuI6evz7BDs97EmerBKrPkC9glai8x052W8kcbR/pgtuHsCEuizc73zmQth/KG/XKNugZxY35j/pr9IPdcTwO95hs8Rf7bZ/LzXbpsvVJcq4P2dBGaYvpyGHFJSx8NfiIcHfRJ8aDyXB5EFQjMpCwDZIhmc46c76LEhALVRxY9PZPtnJehwMerVCuz0/S4adZab8B978LdQ==

[huang-julien]

@LinusBorg Oops sorry, I've been too quick when analyzing the issue.

So i think the issue is probably when passing down an object Ref to a component which watch its own props

https://play.vuejs.org/#eNqFUk1LAzEQ/StjLluh7iLe6ragIqgHFRU8GA9ld7pNzSYhybaFZf+7k6z9Aq2HQOa9l+RN5rXsyph02SAbsdwVVhgPDn1jJlyJ2mjroQWLM+hgZnUNCUmTLXWja/ODp1kowk1Ec1Vo5TzUroJxOD5ouaJiBMkdSqnhXVtZnpCyO+Uqz/qH6UkqPNZGTj1SBZDPzydtG+/pujyjKqJCmcbD8qzWJcoxZ8SntDiDrBdEYyOCepKzSR79EZtney+wIfOOvM5ElS6cVvQL5BSAs4LUQqJ9Ml5QL5yNIDKBm1ILq4eIedvgcIMXcyy+fsEXbh0wzp4tOrRL5GzL+amt0Pf07esjrmm/Jam/RpL6CPmCTssmeOxl140qyfaeLrq9jwMTqnpzt2uPym2aCkaDsot6zmiA4aP+an1n9yK9iOdohvSLm+Efi9Fq6ov5QZAud1ExVhtHYSlxJhQ+h2rwkdDskk+KCFfx8CCqhjBQuIqSUxhPenPhFi0xlbrasf/nqxTLuKGtk9pv8pP1+GFWum+BlBEX

Should we close this one and open another issue ?

[LinusBorg]

Don't think we need a new issue.

Thanks for the new playground. The issue here is that props is not a reactive() object, it's a shallowReactive().

This is indeed a change, caused by a fix for #9916 (PR: #9928)

watching a shallow object should only traverse the first level of properties, but previously it did a deep traverse and unexpectedly also collected nested reactive data as dependencies.

The current behavior is more in line with how watch should work in our understanding, and the change in #9928 is thus considered a fix. But I can see how it's kind of a breaking change for code that previously relied on the previous behavior, especially watching props (likely quite common), as most people might not even be actively aware about the fact that it's a shallowReactive object only.

[yyx990803]

This is indeed a bigger breaking change than expected, so I think it's best to revert the change.

For #9916 - we can still use deep: false to only traverse the root level of shallow reactive arrays. And we can still have a full flexibility after we merge and release #9572 in a minor.