Version

3.2.31

Reproduction link

stackblitz.com

Steps to reproduce

Copy the following code block into a newly created App.vue (locally or in the stackblitz quickstart)

<script setup>
import { ref, reactive, onMounted, getCurrentInstance, nextTick } from "vue";

const list = reactive(["foo", "bar"]);

const first = ref(null);
const itemRefs = ref([]);
const instance = getCurrentInstance();

onMounted(() => {
    console.log(first.value);
    console.log(instance.refs.first);
    list.push("fiz");
    nextTick(() => {
        console.log(itemRefs.value)
        console.log(instance.refs.itemRefs);
    });
});
</script>

<template>
    <ul>
        <li ref="first">first</li>
        <li v-for="item in list" ref="itemRefs">
            {{ item }}
        </li>
    </ul>
</template>

What is expected?

Accessing itemRefs.value should return an array of rendered li elements, the same instance.refs.itemRefs would.

What is actually happening?

Accessing itemRefs.value actually returns an empty Proxy object whose target is an empty array.

Copying the example code provided at the refs-inside-v-for composition api example locally or in stack blitz errors as explained. But attempting this inside the SFC Playground does work.

Duplicate of #5447