ApexCharts & Vue -更改属性值不会更新图表组件中的图表

<template>
  <div>
    <apexchart :options="chartOptions"></apexchart>
  </div>
</template>

<script>
import ApexCharts from 'apexcharts'

export default {
  data() {
    return {
      chartOptions: {
        // 设置图表的初始属性值
        // ...
      }
    }
  },
  watch: {
    chartOptions: {
      deep: true, // 监听对象的属性变化
      handler: function(newVal) {
        // 更新图表
        this.updateChart(newVal)
      }
    }
  },
  methods: {
    updateChart(newOptions) {
      // 销毁旧图表
      if (this.chart) {
        this.chart.destroy()
      }

      // 创建新图表
      this.chart = new ApexCharts(this.$el, newOptions)
      this.chart.render()
    }
  },
  mounted() {
    // 初始化图表
    this.chart = new ApexCharts(this.$el, this.chartOptions)
    this.chart.render()
  },
  beforeDestroy() {
    // 在组件销毁前销毁图表，释放资源
    if (this.chart) {
      this.chart.destroy()
    }
  }
}
</script>