Echarts方法在Vue中不能访问外部方法

<template>
  <div ref="chart"></div>
</template>

<script>
import echarts from 'echarts';

export default {
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      const chartElement = this.$refs.chart;
      const chartInstance = echarts.init(chartElement);
      // 在这里通过chartInstance调用外部方法
    }
  }
}
</script>

<template>
  <div ref="chart"></div>
</template>

<script>
import echarts from 'echarts';

export default {
  data() {
    return {
      chartInstance: null
    }
  },
  mounted() {
    this.initChart();
  },
  watch: {
    chartInstance: {
      handler(newValue, oldValue) {
        // 在这里通过newValue调用外部方法
      },
      immediate: true
    }
  },
  methods: {
    initChart() {
      const chartElement = this.$refs.chart;
      this.chartInstance = echarts.init(chartElement);
    }
  }
}
</script>