ApexCharts dynamically change xaxis.categories

Question

I working on a page where I let users select some criteria, which I use later to extract data from the DB and display them as a chart (apexcharts)

Everything is working fine, except options.xaxis.categories which are changing (number and names) based on the selection ...

what I am doing is, that I have this method for data gathering

import VueApexCharts from 'vue-apexcharts';
 ...
components: { apexchart: VueApexCharts },
 ...
DataService.getData(this.params).then(
    items => {
      this.data = [
        {
          name: 'Number of items',
          data: items.data.map(r => r.nbr_of_items)
        }
      ];
      // HERE IS WHERE I AM POPULATING CATEGORIES
      this.options.xaxis.categories = items.data.map(r => r.labels)
    },
    error => {
      console.log(error);
    }
  );

When I click on the button which triggers this method, the chart shows expected data but the categories are labeled -> 1, 2, 3, 4, 5, ....

even tho when I print out this variable right in the component

{{options.xaxis.categories}}

before I hit the button, this is an empty array (which is ok - not initialized yet) and after I hit the button it shows the correct values ('A', 'B', 'C', 'D', ...)

however the chart still shows just a sequenced numbers :(

Any idea?

EDIT#1: I tried this instead ..

// HERE IS WHERE I AM POPULATING CATEGORIES
const catgrs = items.data.map(r => r.labels)
VueApexCharts.updateOptions({
  xaxis: {
    categories: catgrs
  }
})

Even this ..

// HERE IS WHERE I AM POPULATING CATEGORIES
const catgrs = items.data.map(r => r.labels)
VueApexCharts.updateOptions({
  options: {
    xaxis: {
     categories: catgrs
    }
  }
})

no luck :(

EDIT#2: working solution ...

<template>
  <v-container>
      <v-btn @click="generateReport()">Generate</v-btn>
      <apexchart width="75%" height="500px" class="d-flex justify-center" :options="options" :series="data"></apexchart>
  </v-container>
</template>

<script>
import VueApexCharts from 'vue-apexcharts';
import DataService from './../data.service';

export default {
  name: 'Data',
  components: { apexchart: VueApexCharts },
  data: () => ({
    options: {
      chart: { type: 'line', zoom: { enabled: false } },
      xaxis: {
        categories: []
      },
      title: {
        text: 'Data report',
        align: 'left'
      }
    },
    data: []
  }),
  methods: {
    generateReport() {

      DataService.getData().then(
        items => {
          this.data = [
            {
              name: 'Number of items',
              data: items.data.map(r => r.nbr_of_items)
            }
          ];
          // HERE IS WHERE I AM POPULATING CATEGORIES
          const categories = items.data.map(r => r.labels)
          this.updateAxis(categories);
        },
        error => {
          console.log(error);
        }
      );
    },
    updateAxis(data) {
      this.options = {
        ...this.options,
        xaxis: {
          categories: data
        }
      };
    }
  }
};
</script>

credits to @OscarSchafer