数据更新时Vue Chart JS重新呈现图表

Question

我正在构建一个包含Vue Chart JS和API的Nuxt JS前端，从而每隔X秒获取一次数据并将其保存到Nuxt JS存储中。但是，在图表绘制完成后，尽管数据正确无误，但我似乎无法可靠地重新绘制图表。

我有一个插件LineChart.js，其中包含我的图表：

import { Line, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins

Chart.defaults.global.legend.display = false;
Chart.defaults.global.responsive = true;
Chart.defaults.global.maintainAspectRatio = true;

export default {
  extends: Line,
  mixins: [reactiveProp],
  data () {
    return {
      localData: null
    }
  },
  mounted () {
    this.localData = this.chartData

    // this.chartData is created in the mixin.
    // If you want to pass options please create a local options object
    this.renderChart(this.localData)
  },
  watch: {
    chartData: {
      handler: function (val, oldVal) {
        this.localData = val
      },
      deep: true
    }
  }
}

我认为，通过在chartData上添加观察者，我至少可以找出数据何时发生更改，并且确实如此。

我已经尝试破坏并重新渲染handler函数内部的图表，但这会导致无限循环。 this.chartData确实会更新，我只需要重新渲染图表即可。