Issue with Apex Charts rendering twice with Vue 3

Question

I am using Apex Charts with Vue 3. When the chart renders (draws), its rendering twice. The weird thing is, the second chart is removed from the DOM as soon as I resize or move the browser window. I've also double checked my Vue components to make sure I am not importing this chart component twice.

<template>

<apexchart
  width="500"
  height="400"
  type="bar"
  :options="chartOptions"
  :series="series">
</apexchart>

</template>

<script>

import VueApexCharts from "vue3-apexcharts";

export default {
    name: 'ChartExample',
    components: {
        apexchart: VueApexCharts
    },
    data() {
        return {
            chartOptions: {
                chart: {
                    id: "vuechart-example",
                },
                xaxis: {
                    // categories loaded here
                },
            },
            series: [
                // data loaded here
            ],
        };
    },
    mounted() {
        this.series = [
            {
            name: 'precip',
            data: [1,2,3,4,5],
            }
        ];
        this.chartOptions.xaxis = {
            categories: [1,2,3,4,5],
        }
    }
}

</script>

I'm passing in the data in the mounted hook because I plan on passing in dynamic data. When I add static data directly in the chart options (i.e. not passed in from the mounted hook), the chart is rendered once and works correctly. Any help would be appreciated.

Answer 1

After doing some research I've found this is a known bug in apex charts with Vue3.

https://github.com/apexcharts/vue3-apexcharts/issues/3

The only solution that worked for me is this.

mounted() {
    this.$nextTick(() => {
        window.dispatchEvent(new Event('resize'));
    });
}