api中的vue apexchart动态数据集中面临的问题

Question

我尝试使用apexChartData创建vue条形图。 这是我的代码

export default{
  components: {
    VueApexCharts
  },
  data () { 
    return { 
    barChart: {
    series: [{
    data: []    
    }],
    chartOptions: { 
      plotOptions: {
        bar: {
          horizontal: true
        }
      },
      dataLabels: {
        enabled: false
      },
      xaxis: {
         categories: [] 
      }
    }
  }
},
methods: {
    myFunction() {     
        this.$vs.loading();   
        axios.get("/api/auth/nameofapi").then(response => { 
        this.barChart.series[0].data = response.data[0]['data'];    
        this.barChart.chartOptions.xaxis.categories = response.data[1]['categories']; 
        this.$vs.loading.close();
        }).catch(error => { 
        this.$vs.loading.close()
        this.errorResponse(error);
        });   
    }
},
mounted () {
    this.myFunction();
}
}

我的API响应有效负载，如

[{"data":[4,1]},{"categories":["xyz","abc"]}]

未加载此条形图后，我不确定我在哪里做错了，如果已经存在，请重复此帖子，对不起，但我只是发布我要面对的内容。

任何帮助

预先感谢