How to fix "updateSeries is not a function" error in vue-apexcharts?

Question

Vue.js

Ported API for apexchart chart through axios and throws an error

Uncaught (in promise) TypeError: chart.updateSeries is not a function
    at eval (webpack-internal:///./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader-v16/dist/index.js?!./src/components/TheChart.vue?vue&type=script&lang=js:42:13)

I did everything as in the instructions, but it gives out, tell me why?

import VueApexCharts from "vue3-apexcharts";
import axios from 'axios';

export default {
  components: {
    apexchart: VueApexCharts,
  },
  data: function() {

    return {
      chartOptions: {
        chartapex: {
          id: "vuechart-example",
        },
        chart: {
          height: 350,
          type: 'bar',
        },

        title: {
          text: 'Ajax Example',
        },
        noData: {
          text: 'Loading...'
        },
        dataLabels: {
          enabled: false
        },
      },
      series: [],
    };
  },
  mounted() {
    var url = 'http://my-json-server.typicode.com/apexcharts/apexcharts.js/yearly';
    var chart = document.querySelector('.chart')


    axios({
      method: 'GET',
      url: url,
    }).then(function(response) {
      chart.updateSeries([{
        name: 'Sales',
        data: response.data
      }])
    })

  }
};

Answer 1

I did everything as instructed.

It's a lie. None of the instructions you showed could be.

var chart = document.querySelector('.chart')

Since you’ve thought of this before, it means you don’t know vue at all. Can you still open the documentation?

.then(function(response) {
  chart.updateSeries([{
    name: 'Sales',
    data: response.data
  }])
})

Where does the updateSeries method come from on the html element? The ApexCharts instance has it. Which you don't need to touch, instead of pulling updateSeries directly, you should update the data itself:

.then(response => {
  this.series = [
    {
      name: 'Sales',
      data: response.data,
    },
  ];
});