Refs inside v-for is causing Maximum recursive updates exceeded in component <RouterView>.

[fm353488931]

Vue version

3.4.15

Link to minimal reproduction

https://play.vuejs.org/#eNp9UctOwzAQ/JWVL6RSSEC9VWklQBxA4iHghjlEySYYHDvyI7Sq8u+sHbWlEurBsndmPJrd3bKrvs8Gj2zBuCocdr0sHa64AihqMcBw3miz5CwRxKUgVI3rGV0QassZLL5xQ3wkqDTYUFVp+YINZ6vLIicXsivyI28CbGVE78Ci8z1houu1cbANDilo9aC9cljDCI3RHZxRxjOuKq2sg8kelkGbvH/MuNoxMdUxEaFsKKVHIt6340ee242qoPosVYvwI6QENEaboCYO3ZvoUHuXJDNYrmAbUJisj3wCPqYwv7jYJ9ASM6nb5JKQfQ8HH6DoB9HUBilHOkU+DSSOh6XMWZI2os2+rFa0nfg7TLbrhUTz1DtBVpwtJt/AlVLqn/uIOeMx3eHVJ1bf/+Bflja2oMezQYtmQM72nCtNi26ib18fcU3vPdnp2ktSnyBfkNr0IeMku/aqpth/dDHtXdy6UO2bvV07VHbXVAgalGPUc0brvznR+iHuPJvHfzRVNv4C72j03g==

Steps to reproduce

1.create a component in router-view
2.use refs inside v-for in this component
3.change the length array synchronously in setup
4.free to change the code and save
5.vite's hmr updated and console a error(Maximum recursive updates exceeded in component RouterView.)

What is expected?

just update once.
vue3.3.4 is ok , 3.4.15 is wrong

What is actually happening?

Maximum recursive updates exceeded in component RouterView.

System Info

"vue": "^3.4.15",
"vue-router": "^4.2.5"
"@vitejs/plugin-vue": "^5.0.0",
"vite": "^5.0.0"

Any additional comments?

No response

[LinusBorg]

The reproduction link doesn't reproduce the issue. Please provide a repo that actually allows us to reproduce the issue.

[fm353488931]

The reproduction link doesn't reproduce the issue. Please provide a repo that actually allows us to reproduce the issue.

https://github.com/fm353488931/reproduce10210

[TotallyMehis]

We are also experiencing this issue.

[lmc3s3f0r]

Having a similar issue in a project using with vue-openlayers (I'd like to add a repo to showcase the issue, but the project is quite large and it's tough to add everything), but not with v-for. Just in a prop passed as a ref.

If it helps, I've tried with some versions with these results:
-3.3.4 and 3.4.14: everything works fine
-3.4.13 and 3.4.15: the "Maximum recursive updates exceeded" error appears

[piotrjoniec]

I can confirm the same problem (maximum recursive updates after Vite HMR).

Using Vue 3.4.15 + Vite 5.0.12

First time it was caused by using a v-for loop at the root of a component.
After wrapping it inside a single div, the problem disappeared.

Now I'm getting the same error again. But this time, seems to happen in an external library.

Edit:

I've done further testing and this problem is indeed caused by placing a ref on a v-for loop. Should've read the title better.

Downgrading to Vue 3.4.14 works for the time being.

Possibly caused by this: de4d2e2

[lmc3s3f0r]

I just tried 3.4.16 and I'm getting the same "Maximum recursive updates eceeded".

[LinusBorg]

Then provide a reproduction. The one provided by @fm353488931 works fine with .16

[lmc3s3f0r]

Then provide a reproduction. The one provided by @fm353488931 works fine with .16

I know, I know. You're absolutely right, but the project I'm working on is really big (and private), and trimming it to show the problem is tricky. But yeah, I'll definitely do.