Vue Диаграмма JS перерисовать диаграмму при обновлении данных

Question

Я создаю интерфейс Nuxt JS, который содержит Vue Chart JS и API, посредством которого он выбирает данные каждые 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 функция, но это приводит к бесконечному l oop. this.chartData действительно обновляется, мне просто нужно заново визуализировать диаграмму.