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,
  props: ['chartData'],
  mounted() {
    // this.chartData is created in the mixin
    this.renderChart(this.chartData, {})
  },
  watch: {
    'chartData': {
      handler (newData, oldData) {
        if (oldData) {
          let chart = this._chart

          // Get new and old DataSet Labels
          let newDatasetLabels = newData.datasets.map((dataset) => {
            return dataset.label
          })

          let oldDatasetLabels = oldData.datasets.map((dataset) => {
            return dataset.label
          })

          // Stringify 'em for easier compare
          const oldLabels = JSON.stringify(oldDatasetLabels)
          const newLabels = JSON.stringify(newDatasetLabels)

          // Check if Labels are equal and if dataset length is equal
          if (newLabels === oldLabels && oldData.datasets.length === newData.datasets.length) {
            newData.datasets.forEach((dataset, i) => {
              const oldDatasetKeys = Object.keys(oldData.datasets[i])
              const newDatasetKeys = Object.keys(dataset)

              const deletionKeys = oldDatasetKeys.filter((key) => {
                return key !== '_meta' && newDatasetKeys.indexOf(key) === -1
              })

              deletionKeys.forEach((deletionKey) => {
                delete chart.data.datasets[i][deletionKey]
              })
              
              for (const attribute in dataset) {
                if (dataset.hasOwnProperty(attribute)) {
                  chart.data.datasets[i][attribute] = dataset[attribute]
                }
              }
            })
            
            chart.data.labels = newData.labels
            chart.update()
          } else {
            chart.destroy()
            this.renderChart(this.chartData, this.options)
          }
        }
      }
    }
  }
})

var vm = new Vue({
  el: '.app',
  data: function() {
    return {
      datacollection: {}
    }
  },
  mounted()...