尝试在 apexchart Vue 中动态绑定 x 轴

如何解决尝试在 apexchart Vue 中动态绑定 x 轴

<div class="chart-div">
  <select @change="changeDataTime" class="form-select mt-3 s-chart">
    <option value="today">Today</option>
    <option value="month">Month</option>
    <option value="year">Year</option>
  </select>
  <apexcharts
    id="chart"
    width="800"
    height="450"
    type="area"
    :options="chartOptions"
    :series="series"
  />
</div>

changeDataTime(e) {
  let activeArr = e.target.value;
  console.log(activeArr);
  switch (activeArr) {
    case "today":
      activeArr = this.hoursArray;
      break;
    case "month":
      activeArr = this.lastMonthArray;
      break;
    case "year":
      activeArr = this.lastYeararray;
      break;
  }
  this.chartOptions.xaxis.categories = activeArr;
  console.log(this.chartOptions.xaxis.categories);
},

更改选择选项时，我希望应用重新渲染图表。如果我 console.log console.log(this.chartOptions.xaxis.categories); 它给了我想要插入数据的数组，但它不会在屏幕上重新呈现它。谢谢！！ （想象数组中充满了数据）