title: Accessing child data in v-loop
body: <p><a href="https://v3-migration.vuejs.org/breaking-changes/array-refs.html" rel="nofollow noreferrer">The Vue3 documentation</a> shows how we can use refs in a v-for loop. Modifying it to use components, I get:</p>
  <p><strong>Template</strong></p>
  <pre><code>&lt;Child v-for=&quot;item in list&quot; :ref=&quot;setItemRef&quot;&gt;&lt;/Child&gt;
  </code></pre>
  <p><strong>Script</strong></p>
  <pre><code>export default {
    data() {
      return {
        itemRefs: []
      }
    },
    component: {
      Child
    },
    methods: {
      setItemRef(el) {
        if (el) {
          this.itemRefs.push(el)
        }
      }
    },
    beforeUpdate() {
      this.itemRefs = []
    },
    updated() {
      console.log(this.itemRefs)
    }
  }
  </code></pre>
  <p>It says nothing about how to access the data of the child after a ref is created. I was hoping to do something like:</p>
  <pre><code>&lt;Child v-for=&quot;(item, index) in list&quot; :ref=&quot;setItemRef&quot;&gt;
      {{itemRefs[index].data.variable}}
  &lt;/Child&gt;
  </code></pre>
  <p>This breaks the code. I want to print <code>variable</code>, 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.</p>
  <p>How do I access the child's <code>data.variable</code> in a <code>v-for</code> loop?</p>