vue3**使用v-for 循环时, 使用ref总会获取到的是最后的元素

dom的for代码如下：

 <li class="shrink-0 px-1.5 py-0.5 z-10 duration-200 last:pr-5" 
     v-for="(item, index) in $store.getters.categorys"
     :class="{ 'text-zinc-100': $store.getters.currentCategoryIndex === index }" 
     :key="item.id"
     :ref="(el) => setItemRef(el, index)" @click="onItemClick(item)">
        {{ item.name }}
</li>

先上错误的代码：

let itemRefs = []
  const setItemRef = (el, index) => {
    if (el) {
      itemRefs.push(el)
    }
  }

修改之后的代码：

let itemRefs = []
  const setItemRef = (el, index) => {
    if (el) {
      itemRefs[index] = (el)
    }
  }

问题解析： vue3   =>  使用v-for 循环时, 使用ref总会获取到的是最后的元素, 必须使用函数, 手动赋值, 不能用push, 会在更新的时候造成bug, 元素会重复