title: ref array inside $refs undefine inside mounted()
body: <p>I'm working on a simple image slider component. In the template I'm using <code>v-for</code> to create the <code>img</code> tags and <code>ref</code> to keep a reference to each one of them.</p>
  
  <pre><code>Vue.component('slide', {
      template: `
      &lt;div class="c-image-slider"&gt;
        &lt;img ref="im" :key="image" class="c-image-slider__slide" v-for="image in images" :src="image"&gt;
      &lt;/div&gt;
      `,
      data() {
        return {
          currentImage: 0,
          images: [],
        };
      },
      mounted() {
        this.images = images;
        console.log(this.$refs);
        console.log(this.$refs.im);
      },
    });
  </code></pre>
  
  <p>Inside the <code>mounted()</code> hook of the component I'm trying to log the <code>this.$refs.im</code> array, but I get <code>undefined</code> as a result, even though, the array is definetely there. What am I missing?</p>
  
  <p>Here is also a pen replicating the issue: <a href="https://codepen.io/anon/pen/LQMMBK" rel="nofollow noreferrer">https://codepen.io/anon/pen/LQMMBK</a></p>