Accessing child data in v-loop

Question

The Vue3 documentation shows how we can use refs in a v-for loop. Modifying it to use components, I get:

Template

<Child v-for="item in list" :ref="setItemRef"></Child>

Script

export default {
  data() {
    return {
      itemRefs: []
    }
  },
  component: {
    Child
  },
  methods: {
    setItemRef(el) {
      if (el) {
        this.itemRefs.push(el)
      }
    }
  },
  beforeUpdate() {
    this.itemRefs = []
  },
  updated() {
    console.log(this.itemRefs)
  }
}

It says nothing about how to access the data of the child after a ref is created. I was hoping to do something like:

<Child v-for="(item, index) in list" :ref="setItemRef">
    {{itemRefs[index].data.variable}}
</Child>

This breaks the code. I want to print variable, which is in the data for every Child component. It also gives me a warning saying that I should not use indexes in my template references within a for loop, which tells me that I'm probably on the wrong track.

How do I access the child's data.variable in a v-for loop?