title: vuejs accessing ref inside v-for components
body: <p>Have some components rendered from a v-for loop. The refs are defined like this:
  <code>:ref="'category_' + index"</code> 
  This is how these refs appears in console at: <code>console.log(this.$refs)</code>:</p>
  
  <pre><code>category_0: [VueComponent]
  category_1: [VueComponent]
  category_2: [VueComponent]
  category_3: [VueComponent]
  category_4: [VueComponent]
  category_5: [VueComponent]
  category_6: [VueComponent]
  category_7: [VueComponent]
  category_8: [VueComponent]
  __proto__: Object
  </code></pre>
  
  <p>If I'm trying to acces like that: <code>console.log(this.$refs.category_0)</code>, I get <strong><em>undefined</em></strong>.
  Any other defined ref (not called 'category_..') is working perfectly.</p>
  
  <p>What seems to be wrong here?</p>
  
  <pre><code>&lt;el-form-item v-for="(category,index) in Object.Products" :key="index" 
    :label="category.Name"&gt;
  
      &lt;Select-product v-model="category.IdSelected" :ref="'category'" 
        ProductCategory='Ingredient' @return="handleSelectIngredient"/&gt; 
  
  &lt;/el-form-item&gt;
  
  </code></pre>