I am using Vue 3 and Echart. The function was that when options were detected to be changed, the chart will update accordingly.

<template>
  <div ref="theChart" :style="{ height: '400px' }"></div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import * as echarts from "echarts";
import * as _ from "lodash";

type EChartsOption = echarts.EChartsOption;

export default defineComponent({
  name: "LineChart",
  components: {},
  props: {
    options: {
      type: Object,
      required: true,
    },
  },
  mounted() {
    this.drawChart(this.options);
  },
  watch: {
    options: {
      handler(newOptions, oldOptions) {
        if (!_.isEqual(oldOptions, newOptions)) {
          console.info("hello");
          this.drawChart(newOptions);
        }
      },
      deep: true,
    },
  },
  methods: {
    drawChart(options: EChartsOption) {
      const chartElement = this.$refs.theChart as HTMLElement;
      const chart = echarts.init(chartElement, undefined, {
        renderer: "svg",
      });
      chart.setOption(options, true);
    },
  },
});
</script>

But I got the following "warning" but it works fine

Of course, I tried to put this.echartsModule.init(XXXX) into a component data. But I got the following error when I clicked on the legend of the chart https://github.com/apache/echarts/issues/14198 That is why I used to put this.echartsModule.init(XXXX) into const as zhenghaiyang said. Do you have a better solution to avoid rewrite echartsModule.init(XXXX)? Thanks in advance!