Maxiumum call stack happens on HMR with :ref="setElement" and editing that component

[sapphi-red]

Vue version

3.2.41

Link to minimal reproduction

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

Steps to reproduce

1. Open reproduction
2. Change const count = ref(5); in Foo.vue to const count = ref(56);
3. The warning happens

This does not happen if <Foo ref="component" /> is used instead of <Foo :ref="changeRef" /> in App.vue.

What is expected?

No warning happens.

What is actually happening?

The following error happens.

vue.js?v=f54006de:1274 [Vue warn]: Maximum recursive updates exceeded in component . This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself. Possible sources include component template, render function, updated hook or watcher source function.

System Info

No response

Any additional comments?

Original issue: vitejs/vite#9713