Can't update Apexcharts components value

I am using Apexchart library in Vue.js to plot the data on scatterplots. I can POST my data using Axios. I can see the data coming to the browser by doing console.log() to view the data I receive. By using the updateChart() function, which is the Apexcharts property, I do the necessary operations on the incoming data. I cannot send the data to the data array. You can find the reference sample of Apexcharts here.

Chart.vue

<template>
  <div class="grid ml">
    <div id="main">
      <h1 class="header ml">SEARCH VOLUME</h1>
      <apexcharts
        id="chart"
        height="300"
        type="bar"
        :options="chartOptions"
        :series="series"
      ></apexcharts>
      <button @click="updateChart">Update!</button>
    </div>
  </div>
</template>

<script>
import VueApexCharts from "vue-apexcharts";
import axios from "axios";

export default {
  data: function() {
    return {
      chartOptions: {
        chart: {
          id: "vuechart-example",
        },
        colors: ["#9999CC"],
        dataLabels: {
          enabled: false,
          style: {
            colors: ["#9999CC"],
          },
        },
        noData: {
          text: "Loading...",
        },
        title: {
          text: "lorem ipsum dolar sit amet",
          align: "left",
          margin: 10,
          offsetX: 0,
          offsetY: 0,
          floating: false,
          style: {
            fontSize: "14px",
            fontWeight: "regular",
            fontFamily: "Barlow, sans-serif",
            color: "#6B6B99",
          },
        },
        xaxis: {
          labels: {
            style: {
              colors: "#6B6B99",
              fontSize: "12px",
              fontFamily: "Barlow, sans-serif",
              fontWeight: 400,
              cssClass: "apexcharts-xaxis-label",
            },
          },
          categories: [
            "JAN",
            "FEB",
            "MAR",
            "APR",
            "MAY",
            "JUN",
            "JUL",
            "AUG",
            "SEP",
            "OCT",
            "NOV",
            "DEC",
          ],
        },
        yaxis: {
          labels: {
            style: {
              colors: "#6B6B99",
              fontSize: "12px",
              fontFamily: "Barlow, sans-serif",
              fontWeight: 400,
              cssClass: "apexcharts-xaxis-label",
            },
          },
        },
      },
      series: [
        {
          name: "Company",
          data: [1,2,3,4],
        },
      ],
    };
  },
  methods: {
    updateChart() {
      axios
        .post("http://APIURL", {
          country: "tr",
          lang: "tr",
          keyword: "ankara",
        })
        .then(({ data }) => {
          this.series = [
            {
              data: data,
            },
          ];

          // this.series = data;
          console.log("DATAAA", data);
        })
        .catch((e) => console.log(e));
    },
  },
  components: {
    apexcharts: VueApexCharts,
  },
  beforeMount() {},
};
</script>

<style lang="scss">
#chart {
  display: flex;
  justify-content: center;
  max-width: 760px;
  padding-left: 8px;
}

.ml {
  font-size: 24px;
}

#main {
  width: 1142px;
  height: 566px;
}
</style>

Browser console screen enter image description here

The part where I can't send the data to the array

series: [
        {
          name: "Company",
          data: [1,2,3,4],
        },
      ],