Cannot read properties of undefined (reading 'animateScale')

Question

I'm using Vue 3, Chart.js 4.4.0 and vue-chart-js 5.2.0. And when I access the component whose code is attached below, errors like "Cannot read properties of undefined (reading 'animateScale')" and "Cannot read properties of undefined (reading 'padding')" appear. Hence, my chart doesn't want to load.

<template>
  <div class="col-xl-4 col-lg-5">
    <div class="card shadow mb-4">
      <!-- Card Header - Dropdown -->
      <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
        <h6 class="m-0 font-weight-bold text-primary">Источники дохода</h6>
      </div>
      <!-- Card Body -->
      <div class="card-body">
        <div class="chart-pie pt-4 pb-2">
          <Doughnut id="myChart" :options="options" :data="data"></Doughnut>
        </div>
        <div class="mt-4 text-center small">
          <span class="mr-2">
            <i class="fas fa-circle text-primary"></i> Direct
          </span>
          <span class="mr-2">
            <i class="fas fa-circle text-success"></i> Social
          </span>
          <span class="mr-2">
            <i class="fas fa-circle text-info"></i> Referral
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Doughnut } from 'vue-chartjs'
import { Chart, PieController, ArcElement, CategoryScale, Tooltip, Legend } from 'chart.js'
import { useStore } from 'vuex'
import { computed, onMounted, ref, watch, nextTick } from 'vue'
import { fetchItems, selectItems } from '@/store/widgets/earnings/service.js'

Chart.register(PieController, ArcElement, CategoryScale, Tooltip, Legend)

export default {
  name: 'RevenueSources',
  components: { Doughnut },
  setup () {
    const store = useStore()
    const chart = ref(null)
    const data = ref({
      labels: ['Direct', 'Referral', 'Social'],
      datasets: [{
        data: [],
        backgroundColor: ['#4e73df', '#1cc88a', '#36b9cc'],
        hoverBackgroundColor: ['#2e59d9', '#17a673', '#2c9faf'],
        hoverBorderColor: 'rgba(234, 236, 244, 1)'
      }]
    })
    const options = ref({
      maintainAspectRatio: false,
      tooltips: {
        backgroundColor: 'rgb(255,255,255)',
        bodyFontColor: '#858796',
        borderColor: '#dddfeb',
        borderWidth: 1,
        xPadding: 15,
        yPadding: 15,
        displayColors: false,
        caretPadding: 10
      },
      legend: {
        display: false
      },
      cutoutPercentage: 20
    })

    const items = computed(() => selectItems(store))

    watch(items, () => {
      if (chart.value && Chart.getChart('myChart')) {
        data.value.datasets[0].data = calculateData(items.value)
        chart.value.update()
      }
    }, { immediate: true })

    onMounted(async () => {
      fetchItems(store)
      await nextTick()
      const existingChart = Chart.getChart('myChart')
      if (existingChart) {
        existingChart.destroy()
      }
      const ctx = document.getElementById('myChart')
      chart.value = new Chart(ctx, {
        type: 'doughnut',
        data: data.value,
        options: options.value
      })
    })

    function calculateData (items) {
      const counts = { Direct: 0, Social: 0, Referral: 0 }
      if (items) {
        items.forEach(item => {
          if (counts[item.revenuetype] !== undefined) {
            counts[item.revenuetype]++
          }
        })
      }
      return Object.values(counts).map(item => item)
    }

    return {
      items,
      chart,
      data,
      options
    }
  }
}
</script>

So, how I can solve this problem?

I tried different solutions that I found on this site, but none of them helped me in this situation.