VueChartJs.mixins.reactiveProp sample

HTML

<script src="https://unpkg.com/vue-chartjs@2.6.0/dist/vue-chartjs.full.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js"></script>
<script src="https://unpkg.com/vue@2.3.3"></script>
<script src="https://rawgit.com/eu81273/jsfiddle-console/master/console.js"></script>
<div class="app">
  <doughnut :chart-data="datacollection"></doughnut>
</div>

JavaScript

Vue.component('doughnut', {
  extends: VueChartJs.Doughnut,
  mixins: [VueChartJs.mixins.reactiveProp],
  mounted() {
    // this.chartData is created in the mixin
    this.renderChart(this.chartData, {})
  }
})

var vm = new Vue({
  el: '.app',
  data: function() {
    return {
      datacollection: {}
    }
  },
  mounted() {
  	this.fillData()
  	setInterval(this.fillData, 3000)
  },
  methods: {
    fillData: function() {
      this.datacollection = {
        labels: [this.getRandomInt(), this.getRandomInt()],
        datasets: [{
          label: [],
          backgroundColor: [
          	`rgb(255, 99, 132)`,
            'rgb(185, 185, 255)'
          ],
          data: [this.getRandomInt(), this.getRandomInt()]
        }]
      }
    },
    getRandomInt: function() {
      return Math.floor(Math.random() * (50 - 5 + 1)) + 5
    }
  }
})