Refs inside v-for doesn't apply through v-bind

[MichailShcherbakov]

Vue version

3.4.21

Link to minimal reproduction

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

Steps to reproduce

1. Open App.vue
2. Change ref="itemRefs" to v-bind="props" in the 23 line

What is expected?

itemRefs should have an array of the elements

What is actually happening?

itemRefs have only the last element

System Info

System:
    OS: Linux 5.15 Arch Linux
    CPU: (8) x64 Intel(R) Core(TM) i3-10100F CPU @ 3.60GHz
    Memory: 3.33 GB / 7.71 GB
    Container: Yes
    Shell: 5.2.26 - /usr/bin/bash
  Binaries:
    Node: 20.12.0 - ~/.nvm/versions/node/v20.12.0/bin/node
    Yarn: 1.22.22 - ~/.nvm/versions/node/v20.12.0/bin/yarn
    npm: 10.5.0 - ~/.nvm/versions/node/v20.12.0/bin/npm
    pnpm: 8.15.6 - ~/.nvm/versions/node/v20.12.0/bin/pnpm
  npmPackages:
    vue: ^3.4.21 => 3.4.21

Any additional comments?

No response

[LinusBorg]

Refs in v-for involve a bit of compile-time work. That can'r happen when the compiler can't see the ref prop in the template.

I'd say we need to document this, at least I dont see a realistic way to "fix" it - but someone else might have an idea?

[quiteeasy]

The compiler has some optimizations related to refs handling, so moving that logic to runtime to support dynamic ref bindings would be a bad idea. I agree with @LinusBorg that documenting the current behavior would be the better approach.

[MichailShcherbakov]

So why do ref handling work correctly in v-bind without using v-for? It's a little confusing. It looks like ref handling shouldn't work in "v-bind" at all, doesn't it?

[quiteeasy]

The current behavior works because the ref is resolved at runtime from the object. However, the identifier that the ref is inside a v-for is set at compile time. Due to this, the ref is often set to a random element in the list, typically the last one.

We could set the identifier that a ref is inside a v-for without having the ref props explicitly set, but that would require adding an extra prop to every element inside the v-for that has v-bind="object" set. I'm not sure if this approach is worth the added complexity, especially since the extra prop would not be used most of the time.

I'm opening a PR for the team to consider this potential solution. Let me know if you have any other thoughts or suggestions.