title: Access vue components created via v-for from an array of objects
body: <p>I have the following template and I want to call a method of the dynamically created components in the v-for statement.</p>
  
  <p>For example I want to call on each row the <code>row.getSubtotal()</code> method. I do not know how to do it as <code>this.rows</code> returns the original array and not the array of components.</p>
  
  <pre><code> &lt;template&gt;
      &lt;div&gt;
          &lt;table class="table table-bordered"&gt;
              &lt;thead&gt;
                  &lt;th  v-for="c in columns" v-bind:class="[c.className ? c.className : '']" :key="c.code"&gt;{{c.label}}&lt;/th&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
              &lt;row v-for="(row, index) in rows"
                   :index="index+1"
                   :init-data="row"
                   :columns="columns"
                   :key="row.hash"
                   :hash="row.hash"
                   v-on:remove="removeRow(index)"&gt;&lt;/row&gt;
              &lt;/tbody&gt;
          &lt;/table&gt;
          &lt;div class="d-flex"&gt;
              &lt;table&gt;
                  &lt;tr&gt;
                      &lt;td&gt;Unique SKUs:&lt;/td&gt;
                      &lt;td&gt;{{rows.length}}&lt;/td&gt;
                      &lt;td&gt;Total units:&lt;/td&gt;
                      &lt;td&gt;{{totalUnits}}&lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/table&gt;
              &lt;span class="flex-fill"&gt;&lt;/span&gt;
              &lt;button class="btn" @click="newRow"&gt;Nueva línea&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>The <code>&lt;row&gt;</code> element is a Vue component that it's created via the rows property that contains an array of objects with each rows property. For example:</p>
  
  <pre><code>...
  import Row from './Row'
  
  export default {
      name: "OrderTable",
      components: {Row},
      data: () =&gt; ({
          hashes: [],
          rows: [
             {hash: '_yug7', sku: '85945', name: 'Coconut butter', price: 20},
             {hash: '_g484h', sku: '85745', name: 'Coconut oil', price: 15},
             {hash: '_yug7', sku: '85945', name: 'Cramberry juice', price: 5},
          ],
          fixedColumns: [
              {code: 'index', label: '#'},
              {code: 'sku', label: 'SKU'},
              {code: 'name', label: 'Product name', className: 'text-left align-middle'},
              {code: 'quantity', label: 'Units'},
              {code: 'price', label: 'Price', className: 'text-right align-middle'}
          ]
      }),
      computed: {
          totalUnits: function () {
              for(let x in this.rows) {
                  // HERE I WANT TO CALL A METHOD IN THE ROW COMPONENT
                  // For example this.rows[x].getSubtotal()
              }
          }
      },
  ...
  </code></pre>