Template Refs inside v-for not working with Composition API

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:
[]

[oritwoen]

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

[danielroe]

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

You can track at https://github.com/vuejs/core/issues/5525.

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