am4charts выпуск парения [Vue js]

Question

Я пытаюсь изменить цвет срезов при наведении на градиент.

Это весь мой код скрипта.

что происходит, когда я наведу, цвет мгновенно меняется до градиента и сохраняется до тех пор, пока я не наведу его снова. как только я наведу на него курсор мыши второй раз, проблема решится сама собой, и цвет градиента появится только после того, как анимация наведения закончится, и вернется к цвету по умолчанию после того, как я уйду.

<script>
    import * as am4core from "@amcharts/amcharts4/core";
    import * as am4charts from "@amcharts/amcharts4/charts";
    import am4themes_animated from "@amcharts/amcharts4/themes/animated";

    export default {
        name: "InsightsDonutChart",

        data() {
            return {
                name: 'InsightsDonutChart',
                series: [],
                chart: {},
            }
        },

        props: ['data'],

        mounted() {
            am4core.useTheme(am4themes_animated);
            this.chart = am4core.create("donut", am4charts.PieChart);
            this.initializeDonutChart();
        },

        destroyed() {
            this.chart.dispose();
        },

        methods: {
            initializeDonutChart() {
                this.processDataStructure();
                this.chart.data = this.series;
                this.chart.hiddenState.properties.innerRadius = am4core.percent(0);
                this.chart.hiddenState.properties.radius = am4core.percent(100);
                let pieSeries = this.chart.series.push(new am4charts.PieSeries());
                pieSeries = this.processPieSeries(pieSeries);
                pieSeries.slices.template = this.processPieColors(pieSeries.slices.template);
                let hover;
                if (pieSeries.slices.template.states.hasKey("hover")) {
                    hover = pieSeries.slices.template.states.getKey("hover");
                } else {
                    hover = pieSeries.slices.template.states.create("hover"); // hover event
                }
                hover.properties.fill = this.getGradient(); // hover color
                let label = pieSeries.createChild(am4core.Label);
                label = this.donutText(label);
            },

            processDataStructure() {
                this.data.forEach(keys => {
                    Object.keys(keys).forEach(key => {
                        if (typeof keys[key] == "object") {
                            Object.keys(keys[key][0]).forEach(key2 => {
                                this.series.push({key: key2, value: keys[key][0][key2]})
                            })
                        } else {
                            this.series.push({key: key, value: keys[key]});
                        }
                    })
                });
            },

            processPieSeries(pieSeries) {
                pieSeries.dataFields.value = "value";
                pieSeries.dataFields.category = "key";
                pieSeries.innerRadius = am4core.percent(50); // doughnut hole size
                pieSeries.ticks.template.disabled = true; // text inside or outside the slice
                pieSeries.alignLabels = false; // false == control placement
                pieSeries.labels.template.text = "{category}:\n{value.value}"; // text format
                pieSeries.labels.template.radius = am4core.percent(-30);
                pieSeries.labels.template.fill = am4core.color("white");
                pieSeries.hiddenState.properties.endAngle = -90;
                return pieSeries;
            },

            processPieColors(template) {
                let gradient = this.getGradient();
                template.fill = "#1c3747"; // slices color
                template.stroke = gradient; // border color
                template.strokeWidth = 1; // border width
                template.strokeOpacity = 1; // border opacity
                template.shiftRadius = 0; // distance between slices
                return template;
            },

            getGradient() {
                let gradient = new am4core.LinearGradient(); // create gradient
                gradient.addColor(am4core.color("#05fcac"), 1, 0.2);
                gradient.addColor(am4core.color("#03d5f7"), 1, 0.8);
                gradient.rotation = 0;
                setInterval(function () {
                    let rotation = gradient.rotation + 2;
                    if (rotation > 358) {
                        rotation = 0;
                    }
                    gradient.rotation = rotation;
                }, 50);
                return gradient;
            },

            donutText(label) {
                label.text = "Total:\n{values.value.sum}";
                label.fill = am4core.color("white");
                label.horizontalCenter = "middle";
                label.verticalCenter = "middle";
                label.fontSize = 40;
                return label
            },

            /*processLegend(legend) {
                legend.position = "right";
                legend.scrollable = true;
                legend.stroke = am4core.color("white");
                return legend;
            },*/

        }
    }
</script>

данные - это данные набор, который я получаю из ajax, который я превращаю в серию am4charts ... и я думаю, что это все, что требует объяснения, остальное само собой понятно

Есть идеи?