Change deprecated v-el to ref

Signed-off-by: Jakub Juszczak <netghost03@gmail.com>

src/BaseCharts/Bar.js

@@ -5,7 +5,7 @@ import { mergeOptions } from '../helpers/options'
 export default Vue.extend({
   template: `
     <div>
-      <canvas id="bar-chart" width=width height=height v-el:canvas></canvas>
+      <canvas id="bar-chart" width=width height=height ref="canvas"></canvas>
     </div>
   `,
 
@@ -49,7 +49,7 @@ export default Vue.extend({
       let chartOptions = mergeOptions(this.defaultOptions, options)
 
       this._chart = new Chart(
-        this.$els.canvas.getContext('2d'), {
+        this.$refs.canvas.getContext('2d'), {
           type: 'bar',
           data: data,
           options: chartOptions

src/BaseCharts/Doughnut.js

@@ -5,7 +5,7 @@ import { mergeOptions } from '../helpers/options'
 export default Vue.extend({
   template: `
     <div>
-      <canvas id="doughnut-chart" width=width height=height v-el:canvas></canvas>
+      <canvas id="doughnut-chart" width=width height=height ref="canvas"></canvas>
     </div>
   `,
 
@@ -32,7 +32,7 @@ export default Vue.extend({
       let chartOptions = mergeOptions(this.defaultOptions, options)
 
       this._chart = new Chart(
-        this.$els.canvas.getContext('2d'), {
+        this.$refs.canvas.getContext('2d'), {
           type: 'doughnut',
           data: data,
           options: chartOptions

src/BaseCharts/Line.js

@@ -5,7 +5,7 @@ import { mergeOptions } from '../helpers/options'
 export default Vue.extend({
   template: `
     <div>
-      <canvas id="line-chart" width=width height=height v-el:canvas></canvas>
+      <canvas id="line-chart" width=width height=height ref="canvas"></canvas>
     </div>
   `,
 
@@ -47,7 +47,7 @@ export default Vue.extend({
       let chartOptions = mergeOptions(this.defaultOptions, options)
 
       this._chart = new Chart(
-        this.$els.canvas.getContext('2d'), {
+        this.$refs.canvas.getContext('2d'), {
           type: 'line',
           data: data,
           options: chartOptions

src/BaseCharts/Pie.js

@@ -5,7 +5,7 @@ import { mergeOptions } from '../helpers/options'
 export default Vue.extend({
   template: `
     <div>
-      <canvas id="pie-chart" width=width height=height v-el:canvas></canvas>
+      <canvas id="pie-chart" width=width height=height ref="canvas"></canvas>
     </div>
   `,
 
@@ -32,7 +32,7 @@ export default Vue.extend({
       let chartOptions = mergeOptions(this.defaultOptions, options)
 
       this._chart = new Chart(
-        this.$els.canvas.getContext('2d'), {
+        this.$refs.canvas.getContext('2d'), {
           type: 'pie',
           data: data,
           options: chartOptions

src/BaseCharts/PolarArea.js

@@ -5,7 +5,7 @@ import { mergeOptions } from '../helpers/options'
 export default Vue.extend({
   template: `
     <div>
-      <canvas id="polar-chart" width=width height=height v-el:canvas></canvas>
+      <canvas id="polar-chart" width=width height=height ref="canvas"></canvas>
     </div>
   `,
 
@@ -32,7 +32,7 @@ export default Vue.extend({
       let chartOptions = mergeOptions(this.defaultOptions, options)
 
       this._chart = new Chart(
-        this.$els.canvas.getContext('2d'), {
+        this.$refs.canvas.getContext('2d'), {
           type: 'polarArea',
           data: data,
           options: chartOptions

src/BaseCharts/Radar.js

@@ -5,7 +5,7 @@ import { mergeOptions } from '../helpers/options'
 export default Vue.extend({
   template: `
     <div>
-      <canvas id="radar-chart" width=width height=height v-el:canvas></canvas>
+      <canvas id="radar-chart" width=width height=height ref="canvas"></canvas>
     </div>
   `,
 
@@ -32,7 +32,7 @@ export default Vue.extend({
       let chartOptions = mergeOptions(this.defaultOptions, options)
 
       this._chart = new Chart(
-        this.$els.canvas.getContext('2d'), {
+        this.$refs.canvas.getContext('2d'), {
           type: 'radar',
           data: data,
           options: chartOptions