首先，我想强调的是，我是一个完全新的Vue（和webdev一般）。
我必须创建一个UI，在其中显示从API获取的一些数据。但是我在使用chart.js时遇到了一些问题：我无法在属性更改时更新图表。目前，我的设置如下：
Card.vue:

<script>
    import DoughnutChart from './DoughnutChart.js'
    export default {
        name: 'Card',
        components: {
            DoughnutChart
        },
        props: ['scheda'],
        created() {
            console.log(this.scheda)
        }
    }
</script>
<template>
   <DoughnutChart type="abcd" :chartData="this.scheda"/>
</template>

DoughnutChart.js:

import { defineComponent, h } from 'vue'

import { Doughnut } from 'vue-chartjs'
import {
    Chart as ChartJS,
    Title,
    Tooltip,
    Legend,
    ArcElement,
    CategoryScale
} from 'chart.js'

ChartJS.register(Title, Tooltip, Legend, ArcElement, CategoryScale)

export default defineComponent({
    name: 'DoughnutChart',
    components: {
        Doughnut
    },
    props: ['type', 'chartData'],
    setup(props) {
      const chartData = {
      labels: ['A', 'B'],
      datasets: [
        {
          backgroundColor: ["#ff3333", "#131b2e"],
          cutout: "75%",
          borderWidth: 0,
          data: [props.chartData.value, (100 - props.chartData.value)]
        }
      ]
    }  
    const chartOptions = {
      plugins: {
        legend: {
            display: false
        }
      },
      responsive: true,
      maintainAspectRatio: false
    }  
    return () =>
      h(Doughnut, {
        chartData,
        chartOptions
      })
  }
})

this.scheda是无功值，当它改变时，图表应相应地更新。
我已经阅读了文档，但我就是无法理解它。我也尝试在互联网上搜索，但所有示例都引用了旧版本的图表库。有人能帮助我解决这个问题吗？谢谢！