Vue.js ref dentro del bucle v-for

Traté de usar componentes dentro v-for bucle e iniciar el ref para acceder en el futuro a algunos métodos de estos desde los padres. Aquí un código simplificado de mi caso:

<template>
    <div class="hello">
        {{ msg }}
        <ul>
            <list-item 
                v-for="item in items" 
                :key="item.id" 
                :value="item.text" 
                :ref="`item${item.id}`"
            />
        </ul>
    </div>
</template>

<script>
    import ListItem from "./ListItem";
    export default {
        name: "HelloWorld",
        components: {
            ListItem
        },
        data() {
            return {
                msg: "Welcome to Your Vue.js App",
                items: [
                    { id: 1, text: "foo" },
                    { id: 2, text: "bar" },
                    { id: 3, text: "baz" },
                    { id: 4, text: "foobar" }
                ]
            };
        },
        mounted() {
            setTimeout(() => this.$refs.item2.highlight(), 1500);
        }
    };
</script>

Y ListItem componente:

<template>
    <li v-bind:class="{ highlight: isHighlighted }">
        {{value}}
    </li>
</template>

<script>
    export default {
        name: "list-item",
        props: ["value"],
        data() {
            return {
                isHighlighted: false
            };
        },
        methods: {
            highlight() {
                this.isHighlighted = !this.isHighlighted;
            }
        }
    };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .highlight {
        color: red;
    }
</style>

Solo representa algunos elementos de la lista y resalta uno de ellos después de un segundo y medio. Pero tengo un error: Uncaught TypeError: _this.$refs.item2.highlight is not a function

Después de la sesión de depuración, encontré un hecho interesante: referencias definidas dentro v-for loop no son componentes sino matrices con un componente.
¿Cuál es la lógica, cuál es el envoltorio f? ¿Alguien conoce este caso? ¿Alguien puede dar la explicación de este comportamiento?
El código presentado arriba funciona bien con setTimeout(() => this.$refs.item2[0].highlight(), 1500);

¿Debo pasar siempre [0]? ¿Existe una mejor manera? Ayuda por favor.

Cuando se usan referencias con v-for, los nodos del componente/DOM se almacenan como una matriz directamente en el nombre de la variable, por lo que no es necesario usar el número de índice en el nombre de la referencia. Así que puedes hacer esto:

<list-item
  v-for="item in items" 
  :key="item.id" 
  :value="item.text" 
  ref="items"
/>

Y use las referencias en su componente de esta manera:

this.$refs.items[index]

También tenga en cuenta que las referencias pueden no estar en orden y deberían manejarse de una manera diferente, lo cual es un problema completamente diferente. Puedes seguir eso aquí: https://github.com/vuejs/vue/issues/4952

Para usuarios de Vue 3:

En Vue 3, dicho uso ya no creará automáticamente una matriz en $refs. Para recuperar múltiples referencias de un solo enlace, enlace ref a una función que proporciona más flexibilidad (esta es una característica nueva):

HTML

<div v-for="item in list" :ref="setItemRef"></div>

Con la API de opciones:

export default {
  data() {
    return {
      itemRefs: []
    }
  },
  methods: {
    setItemRef(el) {
      if (el) {
        this.itemRefs.push(el)
      }
    }
  },
  beforeUpdate() {
    this.itemRefs = []
  },
  updated() {
    console.log(this.itemRefs)
  }
}

Con API de composición:

import { onBeforeUpdate, onUpdated } from 'vue'

export default {
  setup() {
    let itemRefs = []
    const setItemRef = el => {
      if (el) {
        itemRefs.push(el)
      }
    }
    onBeforeUpdate(() => {
      itemRefs = []
    })
    onUpdated(() => {
      console.log(itemRefs)
    })
    return {
      setItemRef
    }
  }
}

Aquí está el enlace del documento: https://v3-migration.vuejs.org/breaking-changes/array-refs.html

Traté de manejar las referencias dentro de v-for pasando el índice del método:

<div v-for="(item, index) in items" @click="toggle(index)">
  <p ref="someRef"></p>
</div>

toggle(index) {
  this.refs['someRef'][index].toggle();
}

Pero en realidad estaba alternando los elementos incorrectos ya que los índices de referencias no están ordenados.

Entonces, lo que hice fue agregar un atributo de datos a los elementos de referencia:

<div v-for="(item, index) in items" @click="toggle(index)">
  <p ref="someRef" :data-key="index"></p>
</div>

Ahora cada referencia tiene su clave de datos específica. Y se puede alternar así:

toggle(index) {
  const dropdown = this.$refs['someRef'].find(
        el => el.$attrs['data-key'] === index
    );
  dropdown.toggle();
}

Me había enfrentado al mismo problema.

Como se mencionó sobolevon, el valor de retorno de $refs.{ref name} es una matriz en v-for refs, por lo que mi solución es considerar $refs.{ref name} es una matriz con un solo elemento por defecto, y escribe $refs.{ref name}[0].methodToCall().

Y funciona para mi caso.

Para cualquiera que use Vue 3 con Typescript y esto (vuejs/core#5525) el problema sigue abierto. Según las otras respuestas, puedes hacer algo como esto:

Actualizar: vuejs/core#5525 parece estar arreglado, por lo que una solución diferente puede ser mejor.

<div
   v-for="item in items"
   :ref="addRef"
   ...
</div>

...

function addRef(el: unknown) {
  if (el instanceof Element) {
    participantRefs.value.push(el);
  }
}

Resolví el problema del pedido usando una referencia dinámica: :ref="'myRef' + index".

Si hace esto, Vue crea una nueva matriz para cada elemento en v-for, cuyo único elemento siempre será la referencia que desea. A continuación, puede acceder a él con this.$refs['myRef' + index][0].

(Esto no funcionará en Vue 3).