Apache Echarts & Vue-ECharts - Pie charts animation not working on load

Question

I have a simple doughnut/pie chart that is working fine, but I can not get the default animation, or any animation to work.

I'm using laravel 8, vuejs 2, and echarts / vue-echarts.

This is my vue component in /resopurces/js/components/popular-brands-chart.vue

<template>
  <v-chart class="chart" :option="option" autoresize />
</template>

<script>
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { PieChart } from "echarts/charts";
import { TitleComponent, TooltipComponent, LegendComponent } from "echarts/components";
import VChart from "vue-echarts";

use([CanvasRenderer, PieChart, TitleComponent, TooltipComponent, LegendComponent]);

export default {
  name: "mostpopularbrands",
  components: {
    VChart,
  },
  data() {
    return {
      option: {
        animation: true,
        backgroundColor: "#fefefe",
        color: ["#AD5BA3", "#4EC0B1", "#F4A620", "#EE5969", "#528DCA"],
        textStyle: {
          fontFamily: "museo-sans",
          fontWeight: "bold",
        },
        label: {
          show: true,
          color: "#fff",
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          orient: "vertical",
          right: "15%",
          top: "13%",
          data: ["Titleist", "TaylorMade", "Callaway", "Ping", "Nike"],
          icon: "circle",
          padding: [5, 5],
          itemGap: 15,
          textStyle: {
            fontFamily: "museo-sans",
            fontWeight: "normal",
            color: "#4C4C4C",
            fontSize: "15",
          },
        },
        series: [
          {
            name: "Most popular brands",
            type: "pie",
            animationType: "expansion",
            animationDuration: 5000,
            animationDurationUpdate: 500,
            startAngle: 0,
            endAngle: 360,
            radius: [30, 95],
            center: ["25%", "36%"],
            label: {
              formatter: function (d = "{d}") {
                let rounderPercent = Math.round(d.percent);
                return rounderPercent + "%";
              },
              position: "inside",
              show: true,
            },
            data: [
              { value: 170, name: "Titleist" },
              { value: 100, name: "TaylorMade" },
              { value: 75, name: "Callaway" },
              { value: 50, name: "Ping" },
              { value: 37, name: "Nike" },
            ],
            itemStyle: {
              borderColor: "#fff",
              borderWidth: 2,
            },
          },
        ],
      },
    };
  },
};
</script>

<style scoped>
.chart {
  margin-top: 2rem;
  height: 300px;
  width: 100%;
}
</style>

In the bootstrap.js file I have added this also but pretty sure it's not doing anything at the moment, and even when I did import it using the vue 3 examples nothing worked.

/* VueCompositionAPI */
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI) 

Technically, I should not have to do anything to get this to animate, no console errors. Here is a reference of what it should do : https://echarts.apache.org/examples/en/editor.html?c=pie-doughnut

I can actually get this working via the CDN and codepen here, why it works, I have no clue : https://codepen.io/marcgaumont/pen/OJWyZwe

This is the package used for vue: https://github.com/ecomfe/vue-echarts

Everything works fine, but after 10 + hours trying to get this to animate, trying every example there is. I'm totally out of luck.

Any ideas ?