title: Vue.js ref inside the v-for loop
body: <p>I tried to use components inside <code>v-for</code> loop and init the <code>ref</code> to future access some methods of these from parent. Here a simplified code of my case:</p>
  
  <pre><code>&lt;template&gt;
      &lt;div class="hello"&gt;
          {{ msg }}
          &lt;ul&gt;
              &lt;list-item 
                  v-for="item in items" 
                  :key="item.id" 
                  :value="item.text" 
                  :ref="`item${item.id}`"
              /&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      import ListItem from "./ListItem";
      export default {
          name: "HelloWorld",
          components: {
              ListItem
          },
          data() {
              return {
                  msg: "Welcome to Your Vue.js App",
                  items: [
                      { id: 1, text: "foo" },
                      { id: 2, text: "bar" },
                      { id: 3, text: "baz" },
                      { id: 4, text: "foobar" }
                  ]
              };
          },
          mounted() {
              setTimeout(() =&gt; this.$refs.item2.highlight(), 1500);
          }
      };
  &lt;/script&gt;
  </code></pre>
  
  <p>And <code>ListItem</code> component:</p>
  
  <pre><code>&lt;template&gt;
      &lt;li v-bind:class="{ highlight: isHighlighted }"&gt;
          {{value}}
      &lt;/li&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      export default {
          name: "list-item",
          props: ["value"],
          data() {
              return {
                  isHighlighted: false
              };
          },
          methods: {
              highlight() {
                  this.isHighlighted = !this.isHighlighted;
              }
          }
      };
  &lt;/script&gt;
  
  &lt;!-- Add "scoped" attribute to limit CSS to this component only --&gt;
  &lt;style scoped&gt;
      .highlight {
          color: red;
      }
  &lt;/style&gt;
  </code></pre>
  
  <p>It's just renders a few list items and highlights one of them after one and half second. But I got an error: <code>Uncaught TypeError: _this.$refs.item2.highlight is not a function</code><br>
  After debug session I've found an interesting fact: refs defined inside <code>v-for</code> loop are not a components but the arrays with one component.<br>
  What is the logic, what is the f wrapper? Does anyone meet this case? Can somebody give the explanation of this behaviour?<br>
  Code presented above works fine with <code>setTimeout(() =&gt; this.$refs.item2[0].highlight(), 1500);</code><br>
  Must I always pass <code>[0]</code>? Is there exist a better way? Help, please.</p>