module.exports = {
  props: {
    chartData: {
      required: true
    }
  },

  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) => {
              chart.data.datasets[i] = dataset
            })

            chart.data.labels = newData.labels
            chart.update()
          } else {
            chart.destroy()
            this.renderChart(this.chartData, this.options)
          }
        }
      }
    }
  }
}

module.exports = {
  props: {
    chartData: {
      required: true
    }
  },

  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) => {
              // Get new and old dataset keys
              const oldDatasetKeys = Object.keys(oldData.datasets[i])
              const newDatasetKeys = Object.keys(dataset)
              
              // Get keys that aren't present in the new data
              const deletionKeys = oldDatasetKeys.filter((key) => {
                return key !== '_meta' && newDatasetKeys.indexOf(key) === -1
              })
              
              // Remove outdated key-value pairs
              deletionKeys.forEach((deletionKey) => {
                delete chart.data.datasets[i][deletionKey]
              })
              
              // Update attributes individually to avoid re-rendering the entire chart
              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)
          }
        }
      }
    }
  }
}

Resolve reactive props animation issue.
Resolve reactive props animation issue.

A small consequence of replacing the entire dataset in the mixins files is that it causes certain charts to completely re-render even if only the 'data' attribute of a dataset is changing. In my case, I set up a reactive doughnut chart with two data points but whenever the data values change, instead of shifting the fill coloring, it completely re-renders the entire chart.

You can see the issue in this fiddle (note the constant re-rendering):
https://jsfiddle.net/sg0c82ev/11/

To solve the issue, I instead run a diff between the new and old dataset keys, remove keys that aren't present in the new data,  and update the rest of the attributes individually. After making these changes my doughnut chart is animating as expected (even when adding and removing new dataset attributes).

A fiddle with my changes:
https://jsfiddle.net/sg0c82ev/12/

Perhaps this is too specific of a scenario to warrant a complexity increase like this (and better suited for a custom watcher) but I figured it would be better to dump it here and make it available for review. Let me know what you think.