vue3 echarts resize 报错

参考：https://github.com/apache/echarts/issues/13943

<div id="card" ref="chartDom" :style="chartStyle"></div>

import { shallowRef } from 'vue';
import * as echarts from 'echarts';
import _ from 'lodash';
import { addListener, removeListener } from "resize-detector";

data(){
    return{
      myChart: null,
      chartOption: {
        grid:{
          x:200
        },
        title: {
          text: '折线图展示',
          left:150,
        },
        tooltip: {
          trigger: 'axis',
          formatter: function (params){
          var showHtm="";
          var sum = 0;
          var average = 0
          for(var i=0;i<params.length;i++){
              var name = params[i].seriesName;
              //值
              var value = params[i].value;
              //平均值
              sum += params[i].value; 
              showHtm+= name + ' 温度：' + value+'<br>'
          }
          average = sum/params.length;
          return showHtm+'平均值：'+average+'均匀度：12';
          }
        },
        legend: {
          orient:"vertical",
          // data:['01','02','03'],
          left:10,
          selector: ['all', 'inverse']
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            dataView: { readOnly: false },
            magicType: { type: ['line', 'bar'] },
            restore: {},
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: [
          {
            name:'温度',
            type: 'value',
            axisLabel: {
            formatter: '{value} °C'
            }
          },
          {
            name:'ct值',
            type:'value',
          }
        ],
        series: [
          {
            name: '通道1',
            type: 'line',
            data: [10, 11, 13, 11, 12, 12, 9]
          },
          {
            name: '通道2',
            type: 'line',
            data: [1, 3, 5, 2, 3, 5, 0]
          },
          {
            name: '通道3',
            type: 'line',
            data: [1, 2, 5, 3, 5, 2, 0]
          },
          {
            name: '通道4',
            type: 'line',
            data: [1, 3, 4, 4, 7, 2, 0]
          },
          {
            name: '通道5',
            type: 'bar',
            yAxisIndex: 1,
            data: [1, 3, 4, 4, 7, 2, 0]
          },
          
        ]
      },
      chartStyle: {
        width: '100%',
        height: '65%'
      }
    }
  },

 mounted(){
    this.renderChart();
 },
 methods: {
   renderChart() {
      this.myChart = shallowRef(echarts.init(this.$refs.chartDom));
      addListener(this.$refs.chartDom, _.debounce(this.resize, 300));
      this.myChart.setOption(this.chartOption);
    },
    resize() {
      this.myChart.resize();
    },
    disposeChart() {
      if(!this.myChart)
        return;
      this.myChart.dispose();
      this.myChart = null;
    }
 }，
  beforeUnmount() {
    removeListener(this.$refs.chartDom, this.resize);
  },
  unmounted() {
    this.disposeChart();
  }