Vue version

3.3.4

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-ojg3s2?file=src%2FApp.vue

Steps to reproduce

Reset and mutate

• Open the developer tool (F12)
• Click on button "Reset and Mutate"

Only mutation

• Refresh the preview browser
• Click on button "Mutate"

What is expected?

Reset and mutate

Observe that the console log, ran by child component's watcher, of the obj is not printed

Only mutation

Observe that the console log is periodically printed.

What is actually happening?

If obj is not destructured but accessed by props.obj, the watcher works.

Seems changing the reactive obj's reference and then mutating it causes this bug.

System Info

No response

Any additional comments?

I did not reproduce this behavior on the SFC playground, where both "mutate" and "Reset and Mutate" successfully produced periodic console logs. Only got it working with a "build step", dev and build included. Didn't try webpack, but nuxt environment also reproduces this behavior.

Let me know if this is a known issue but I didn't find it.

See https://github.com/vuejs/rfcs/discussions/502 and enable propsDestructure feature.

//vite.config.ts
export default defineConfig({
  plugins: [
    vue({
      script: {
        propsDestructure: true,
      },
    }),
  ],
});