title: Vuejs can't access refs from component
body: <p>I am trying to get the canvas element which is inside a template of a component, found great documentations for vuejs1 but not for vuejs2 where &quot;ref&quot; is the only way to get the element. I am getting the object though, but when I try to access the variable it is undefined.</p>
  <h2>HTML</h2>
  <pre class="lang-html prettyprint-override"><code>&lt;div id=&quot;app&gt;
    &lt;template id=&quot;image-capture&quot;&gt;
      &lt;div class=&quot;row&quot; &gt;
        &lt;canvas ref=&quot;icanvas&quot; &gt;&lt;/canvas&gt;
      &lt;/div&gt;
    &lt;/template&gt;
  &lt;/div&gt;
  
  </code></pre>
  <h2>JS</h2>
  <pre class="lang-js prettyprint-override"><code>
  const ic = {
    template: '#image-capture' ,
     
    created () {
      console.log(this.$refs); //this returns object
      console.log(this.$refs.icanvas); // but this is undefined
    }
  }
  
  const routes = [
    { path: '/ic', component:   ic},
  ]
  
  const router = new VueRouter({
    routes 
  })
  
   new Vue({
    router,
     }).
  
  $mount('#app')
  </code></pre>
  <p>I need to get the icanvas element.</p>
  <p><a href="https://i.stack.imgur.com/waekB.png" rel="noreferrer"><img src="https://i.stack.imgur.com/waekB.png" alt="here is console log" /></a></p>