Заголовки легенды кольцевой диаграммы ApexCharts не отражают предоставленные метки данных (застряли как «серия-1» и т. Д.)

Я импортирую простую кольцевую диаграмму Apexcharts в свой проект Vue.js, однако, даже после того, как следую документации, предоставленной на их site, названия легенды остаются как «серия-1, серия-2, ...».

Вот изображение визуализации: Пончиковая диаграмма

Как видите, я следую документации, добавляя series и labels как к объекту данных, так и к элементу div, но по какой-то причине все еще не могу отобразить правильные метки.

Как мне решить эту проблему?

Боковое примечание: переключение legend.show с false на true ничего не делает.

<div id="donut-chart">

    <v-container>
        <div id="chart">
            <apexchart 
                type=donut 
                width=380 
                :options="chartOptions" 
                :labels="labels" 
                :series="series" />
        </div>
    </v-container>

</div>

import VueApexCharts from 'vue-apexcharts'

export default {
    name: 'donut-chart',
    data: () => ({
        series: [23, 11, 54, 72, 12],
        labels: ["Apple", "Mango", "Banana", "Papaya", "Orange"],
        chartOptions: {
            dataLabels: {
                enabled: false
            },
            responsive: [{
                breakpoint: 480,
                options: {
                    chart: {
                        width: 200
                    },
                    legend: {
                        show: false
                    }
                }
            }],
            legend: {
                position: 'right',
                offsetY: 0,
                height: 230
            }
        }
    }),
    components: {
        apexchart: VueApexCharts,
    }
}