Vue 3 Compositions API ref in v-for - vuejs3

Question

Hej!
I'm trying to improve my due skills. I decided to make a simple dice game but I'm failing at the beginning.
I have two components. The Main Game and a dice component. In the main App component, I include the dice component and iterate over it 5 times to create 5 dices. I also add a button to roll all the dices:
<template>
<div class="center">
<Dice v-for="(dice, i) in 5" ref="diceChildren" :initialNumber="i" />
</div>
<div class="center">
<button #click="rollDice">Würfeln</button>
</div>
</template>
<script setup>
import { ref } from 'vue'
import Dice from './components/Dice.vue'
const diceChildren = ref([]);
const rollDice = () => {
console.log(diceChildren);
}
</script>
I followed the official instructions here: https://vuejs.org/guide/essentials/template-refs.html#refs-inside-v-for and I expected a filled array with dice refs but the diceChildren array is empty.
I need the reference to the dices to roll the dice and to get rolled number.
The get things completed, this is the code of the dice component:
<template>
<div class="dice">
<img class="dice-image" :src="getImagePath()" alt="Bild eines Würfels"/>
</div>
</template>
<script setup>
import { defineProps, ref } from 'vue'
const props = defineProps({
initialNumber: Number,
});
const number = ref(props.initialNumber + 1);
const rollDice = () => {
number.value = Math.floor(Math.random() * 6 + 1)
}
const getImagePath = () => `dice_${number.value}.png`;
defineExpose({
rollDice,
});
</script>
Thank you so much for help. I exhausted many hours hitherto.
I also tried to take the refs insight template:
<template>
<div class="center">
<template v-for="(dice, i) in 5" ref="diceChildren" />
<Dice :initialNumber="i" />
</template>
</div>
<div class="center">
<button #click="rollDice">Würfeln</button>
</div>
</template>