使用Vue Google Chart - Geochart。图表在数据更改时重新加载，但图例被删除

<template>
  <div>
    <vue-google-chart
      :chart-type="'GeoChart'"
      :data="chartData"
      :options="chartOptions"
      :width="'100%'"
      :height="'400px'"
    ></vue-google-chart>
    <button @click="reloadChart">重新加载图表</button>
  </div>
</template>

<script>
import VueGoogleChart from 'vue-google-charts';

export default {
  components: {
    VueGoogleChart,
  },
  data() {
    return {
      chartData: [
        ['Country', 'Popularity'],
        ['Germany', 200],
        ['United States', 300],
        ['Brazil', 400],
        ['Canada', 500],
        ['France', 600],
        ['RU', 700],
      ],
      chartOptions: {
        region: 'world',
        displayMode: 'regions',
        resolution: 'countries',
      },
    };
  },
  methods: {
    reloadChart() {
      // 保存图例状态
      const legend = this.$refs.chart.$chartObject.legend.position;

      // 重新加载图表
      this.chartData = [
        ['Country', 'Popularity'],
        ['Germany', 100],
        ['United States', 200],
        ['Brazil', 300],
        ['Canada', 400],
        ['France', 500],
        ['RU', 600],
      ];

      // 重新添加图例
      this.$nextTick(() => {
        this.$refs.chart.$chartObject.legend.position = legend;
      });
    },
  },
};
</script>