title: Can't get Chart.js to run in a Vue.js component
body: <p>So I am trying to display a nice chart using <a href="http://www.chartjs.org/docs/" rel="nofollow">Chart.js</a> inside a Vue.js component... Should not be so complicated but I am hitting a wall there.</p>
  
  <p>Here is my component code (syntax is based on <a href="https://github.com/vuejs-templates/webpack" rel="nofollow">Vue.js webpack boilerplate</a>)</p>
  
  <pre><code>&lt;template&gt;
  
    &lt;canvas v-el:canvas style="width: 100%; height: 200px"&gt;&lt;/canvas&gt;
  
  &lt;/template&gt;
  
  &lt;script&gt;
  import Chart from 'chart.js'
  
  export default {
    compiled: function () {
  
      // fetch canvas DOM element
      let canvas = this.$els.canvas
  
      // init chart.js
      let chart = new Chart(canvas, {
        type: 'bar',
        data: {
          labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
          datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3]
          }]
        },
        options: {
          scales: {
            yAxes: [{
              ticks: {
                beginAtZero: true
              }
            }]
          }
        }
      })
      console.log(chart)
  
    }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>I simplified the component as much as I could, and used data from the doc example (will bind real data using <code>props</code> later).</p>
  
  <h1>So I keep getting this error in the console :</h1>
  
  <p><code>Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.</code></p>
  
  <p>I looked it up, it seems that this has something to do with the variable passed to <code>getComputedStyle</code> used in Vue.js.</p>
  
  <p><strong>My best guess</strong> would be that <code>this.$els.canvas</code> does not return the right object. But if I output it in the console using <code>console.log</code> it seems right.</p>
  
  <pre><code>console.log(canvas)
  // outputs &lt;canvas style="width: 300px; height: 150px;"&gt;&lt;/canvas&gt;
  console.log(canvas.tagName)
  // outputs CANVAS
  console.log(canvas.style.height)
  // outputs 200px
  </code></pre>
  
  <p>Hmmm this is actually weird and could be helpful : did you notice that I set the canvas <code>style.height</code> in the template, but if I do <code>console.log(canvas)</code> I see <code>height: 150px</code> but if <code>console.log(canvas.style.height)</code> 2 lines below, I get <code>200px</code> as an output ?!! WTF is going on ?.. Vue is messing with my head right now</p>
  
  <p><strong>Link to jsFiddle for you to play with (check out the result in the console)</strong>
  <a href="https://jsfiddle.net/kartsims/g8s12yd2/3/#&amp;togetherjs=CQrzT996AR" rel="nofollow">https://jsfiddle.net/kartsims/g8s12yd2/3/#&amp;togetherjs=CQrzT996AR</a></p>