Vue ChartJs

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<div id="vue">
  <chart type="doughnut" :data="data"></chart>
</div>

Vue

//clone is equivalent of lodash.cloneDeep
//necessary because chart.js messes with the data object, inserting circular references that break Vue's reactivity
function clone(obj){
	return JSON.parse(JSON.stringify(obj))
}

// The important part: the Chart component
Vue.component('chart', {
	template:`
  	<canvas></canvas>
  `,
  props:['type', 'data', 'options'],
  mounted(){
  	this._chart = new Chart(this.$el, {
    	type:this.type,
      data:clone(this.data),
      options:this.options
    })
  }
})

//App setup
new Vue({
	el:'#vue',
  data(){
  	return {
    	data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 10,
            cutoutPercentage: '0%'
        }]
    }
    }
  },
  created(){
  	setInterval(()=>{
    	this.data.datasets[0].data = Array(6).fill(0).map(()=> Math.random() * 50)
    }, 1000)
  }
})