title: Vuejs get $refs value in methods
body: <p>I have multiple rows and I wish to get input value inside my tr refs but it returns undefined.</p>
  
  <p><a href="https://i.stack.imgur.com/ZkQxp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZkQxp.png" alt="one"></a></p>
  
  <h1>Code</h1>
  
  <p><code>Component</code></p>
  
  <pre><code>&lt;table class="table table-bordered table-striped table-hover"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;strong&gt;Serial Number&lt;/strong&gt;&lt;/td&gt;
              &lt;td&gt;&lt;strong&gt;Product&lt;/strong&gt;&lt;/td&gt;
              &lt;td&gt;&lt;strong&gt;Amount&lt;/strong&gt;&lt;/td&gt;
              &lt;td&gt;&lt;strong&gt;Price&lt;/strong&gt;&lt;/td&gt;
              &lt;td width="50"&gt;&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr v-for="(row, index) in serial_numbers" :key="index"&gt;
              &lt;td&gt;
                  &lt;el-input ref="barcoded" v-model="row.barcode_id"&gt;&lt;/el-input&gt;
              &lt;/td&gt;
              &lt;td&gt;
                  &lt;el-input ref="product" v-model="row.product"&gt;&lt;/el-input&gt;
              &lt;/td&gt;
              &lt;td&gt;
                  &lt;el-input ref="amount" v-model="row.amount"&gt;&lt;/el-input&gt;
              &lt;/td&gt;
              &lt;td&gt;
                  &lt;el-input ref="price" v-model="row.price" readonly&gt;&lt;/el-input&gt;
              &lt;/td&gt;
              &lt;td&gt;
                  &lt;el-link v-on:click="removeElement(index);" style="cursor: pointer"&gt;Remove&lt;/el-link&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;div&gt;
    &lt;el-button type="primary" class="button btn-primary" round @click="addRow"&gt;Add row&lt;/el-button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><code>Script</code></p>
  
  <pre><code>methods: {
      focusInput() {
          this.$refs.barcode_id.focus();
      },
      addRow() {
          var barcodes = document.createElement('tr');
          this.serial_numbers.push({
              barcode_id: '',
              product: '',
              amount: '',
              price: ''
          });
  
          // try to get value of barcode input
          console.log(this.refs.barcoded); // undefined
  
          this.$nextTick(function () { 
              const nbBarcodes = this.$refs.barcoded.length;
              this.$refs.barcoded[nbBarcodes - 1].focus(); 
          });
      },
  }
  </code></pre>
  
  <p><strong>Any idea?</strong></p>
  
  <h1>Update</h1>
  
  <p><a href="https://jsfiddle.net/robertnicjoo/7qL4gfu0/2/" rel="nofollow noreferrer">Demo</a></p>