[bug] Lifecycle hooks has been called twice in HMR when I use "v-for + ref" and "script setup" in RouterView.

[lifetimesw]

Vue version

3.2.45

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-fx7e3m?file=src/views/HelloWorld.vue

Steps to reproduce

• Create a vue3 repo with vue-router
• Use Composition Api in the components of RouterView
• Use v-for + ref attribute on the html element
• Define a proxy object to the ref attribute
• Change and save the content in <script setup> to trigger hot module replacement

What is expected?

onMounted will be Called once

What is actually happening?

onMounted will be Called twice.

System Info

"mounted" will be print twice on the browser console

Any additional comments?

[toomsie]

Thanks very much, it took me a while to before I checked the chrome dev tools.

[toomsie]

I did simplify the code by removing line 12: <p v-for="(x, i) in 10" :key="i" ref="pRefs">{{ x }}</p>. but still the same thing happens. 🙁

[toomsie]

Fix the problem. I believe that setup(){} function helped somewhat. The setup function is only executed only one in vue.js 3, if I am correct.

https://stackblitz.com/edit/vitejs-vite-nzzz5i?file=src%2Fviews%2FHelloWorld.vue

[jinusean]

I am facing this issue even without v-for. I have a ref to a custom component whose onMounted function is being called twice

[benjaminrobinet]

Upvote this issue, I still reproduce using latest Vue version.

[tuhinjamal]

I'm facing this issue for each function call .