Vue-Apexchart条形图未加载

Question

我注意到我的尖头柱状图存在一个错误。最初加载仪表板时，图表中的数据可以正常运行，但是当我访问另一条路线并返回到仪表板时，除非点击刷新按钮，否则图表和标签将不再加载。

请在下面查看我的代码。

Template.vue

    <div id="chart2">
      <apexchart type="bar" height="350" :options="chartOptions2" :series="series2"></apexchart>
    </div>

<script>
import VueApexCharts from 'vue-apexcharts'

  export default {
    components: {
      apexchart: VueApexCharts
    },

    data: () => ({
      series2: [{
        data: []
      }],
      chartOptions2: {
        chart: {
          height: 350,
          type: 'bar',
          events: {
            click: function(chart, w, e) {
            }
          }
        },
        plotOptions: {
          bar: {
            columnWidth: '45%',
            distributed: true,
          }
        },
        dataLabels: {
          enabled: false
        },
        legend: {
          show: false
        },
        xaxis: {
          categories: [],
          labels: {
            style: {           
              fontSize: '12px'
            }
          }
        }
      },
    }),

    created () {
      this.getCorporateObjectiveScore ()
    },

     methods: {
      getCorporateObjectiveScore () {
        axios.get('/api/corporate-objective-chart')
        .then(response => {
          this.chartOptions2.xaxis.categories = response.data.xAxis
          this.series2[0].data = response.data.yAxis
        })
        .catch(error => console.log(error))
      },
    }
  }