Vue.js ref inside the v-for loop

When using refs with v-for, the component / DOM nodes are stored as an array directly to the variable name so you don’t need to use index number in the ref name. So you can do this:

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

And use the refs in your component like this:

this.$refs.items[index]

Also note that the refs may not be in order and would need to be handled in a different way which is a completely different issue. You can follow that here: https://github.com/vuejs/vue/issues/4952