Vue version

3.2.45

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-z78kz9?file=src%2Fcomponents%2FSample.vue

Steps to reproduce

1. Click the button and you will see both "a" and "common" updated in it's own instances.
2. Click the other button, you will see both "a" and "common" updated in it's own instances. And "common" value BATCH updated
3. Enable <h3>Another value: {{ another }}</h3> , click any button of instance will cause "a" and "common" valued updated reactived.
4. Why ?

What is expected?

Enable or Disable <h3>Another value: {{ another }}</h3> will show the same output.

What is actually happening?

Enable or Disable <h3>Another value: {{ another }}</h3> will show different output.

System Info

No response

Any additional comments?

No response

Expected behaviour.

1. The variables Data in the normal script block are shared between both instances of the component
2. Each component only re-renders when one of its own reactive dependencies changes (a).
3. But when you bring in the another ref, this ref is now a shared reactive dependency of both instances.
4. So when you click the button in one of the components, it changes another, which triggers both components to re-render.