Template Refs inside v-for not working with Composition API

[dikesh]

Environment

• Operating System: Linux
• Node Version: v16.14.0
• Nuxt Version: 3.0.0-27484505.9f6eff7
• Package Manager: npm@8.3.1
• Builder: vite
• User Config: -
• Runtime Modules: -
• Build Modules: -

Reproduction

Sharing the SFC code.

<template>
  <div>
    <div v-for="i in 3" :key="i" class="content" ref="contentRef">
      Lorem ipsum dolor sit amet consectetur adipisicing elit.
    </div>
  </div>
</template>

<script setup>
const contentRef = ref([]);

onMounted(() => {
  console.log("On Mounted Ref:");
  console.log(JSON.stringify(contentRef.value.map((cr) => cr)));
});
</script>


<style scoped>
.content {
  display: table;
  padding: 30px;
  height: 60px;
  border-bottom: 1px solid grey;
}
</style>

Describe the bug

I am trying to use Template Refs inside v-for loop. But the corresponding reference returns an empty array.

The same example runs correctly on Vue SFC Playground.

Additional context

No response

Logs

On Mounted Ref:
[]

[danielroe]

This is a Vue SSR bug: see reproduction without Nuxt.

You can track at vuejs/core#5525.

See also https://github.com/nuxt/framework/discussions/3661.

[oritwoen]

@danielroe latest Vue probably fixed this: https://github.com/vuejs/core/blob/main/CHANGELOG.md#3232-2022-04-12

[danielroe]

Any chance you could test with latest vue to see?

[oritwoen]

Updated reproduction in StackBlitz: https://stackblitz.com/edit/github-6ovsn2-9srfej

I also check latest Nuxt after nuxt/framework#3968 and also works! 🎉 🥳

A little note. Using JSON.stringify on reproduction returns empty objects instead of DOM tree elements.

Before 3.2.32:

With 3.3.32:

[dikesh]

It is working as expected now with vue@3.2.32.