Getting uncaught error while running Apexcharts.render(): Uncaught (in promise) TypeError: e.put is not a function

[convey-aron]

As you can see from the screenshot, I'm getting the uncaught: e.put is not a function error while running apexcharts.render method.
I'm working on Vue3/vite project and installed apexcharts@4.1.0 and here's the reusable code part for rendering chart.

    chartRendered.value = false;
    const element = document.querySelector("#noOfNewSubscribersChart");
    const subscribersGraphData = [];
    const monthData = [];

    props.newSubscribersGraphData.forEach((value) => {
      const { count, x_axis } = value;
      subscribersGraphData.push(count);
      monthData.push(x_axis);
    });
    const series = [{
      name: 'New Subscribers',
      data: subscribersGraphData,
      color: '#608bfa'
    }];
    chartRef.value = new ApexCharts(
      element,
      {
        ...chartOptions,
        series,
        x_axis: {
          categories: monthData
        },
        tooltip: {
          theme: isDark.value ? 'dark' : 'light'
        }
      },
    );

    chartRef.value.render().then(() => {
      chartRendered.value = true;
    }).catch(err => {
      chartRendered.value = false;
    });

Even I get the error above when I load the page initially, I could get the working graph if I force to refresh the page.

Could you please support me to fix this issue?
I have working code for vue2 project to integrate apexcharts, and I'm getting this issue while I'm converting vue2 to vue3

[convey-aron]

@franklx @yangkun @rndmerle @zur4ik sorry, but could you please help me to fix the issue above?