我是Vuejs的新手，我使用过vue-chartjs。所以我从API调用数据到父视图，并将其传递到一个组件。它根据我拥有的图表数量生成图表，这很好。但是我不知道如何根据我从API获得的数据更改“chartData”的数据。使用：vue 3合成API和vue-chartjs

查看图表视图

<template>
    <div class="grid grid-rows-2 grid-flow-col gap-40">
        <chart :charts="charts"/>        
    </div>
</template>
  
<script setup>

    import chart from '../components/chart.vue'
    import axios from 'axios'
    import { nextTick, ref, reactive } from 'vue';

    const charts = ref([])

    const getCharts = async () => {
        
        try {
         
        const response = await axios.get('http://localhost:3000/api/charts/',{
            headers: {
            "Content-Type": "application/json",
            }
        })
            charts.value = response.data
            console.log(charts.notApplicable)
               
        } catch (error) {
            
        }
    }
getCharts()
</script>

图表.版本

<template>

<div style="color:black;">
<h2 class="text-black">Title</h2>
<div v-for="chart in charts" :key="chart.id">
<!-- {{chart.chart}} -->
<Pie 
      :chart-options="chartOptions"
      :chart-data="chartData"
      :chart-id="chartId"
      :dataset-id-key="datasetIdKey"
      :plugins="plugins"
      :css-classes="cssClasses"
      :styles="styles"
      :width="width"
      :height="height"
    />
</div>

</div>
</template>

<script setup>

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

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

    
    const props = defineProps({
        chartId:{
            type: String,
            default: 'pie-chart' 
        },
        datasetIdKey:{
            type: String,
            default: 'label'
        },
        width: {
            type: Number,
            default: 300
        },
        height: {
            type: Number,
            default: 500
        },
        cssClasses: {
            default: '',
            type: String
        },
        styles: {
            type: Object,
            default: () => {}
        },
        plugins: {
            type: Object,
            default: () => {}
        },
        charts: {
            type: Object,
            default: () => {}
        }
    })

    /* data */

    const chartData = reactive({
        labels: [ 'Implemented', 
        'Partically Implemented', 
        'Not Implemented',
        'Not Applicable' ],
        datasets: [ { 
            backgroundColor: [ 'Green', 'Orange', 'Red', 'Grey'],
            data: [ 4,2,8,5] 
        } ]
    })
    
    const chartOptions = reactive({
        responsive: true,
        maintainAspectRatio: false,
        plugins:{
            legend:{
                display:true,
                position:'bottom',
            }
        }
    })

    
</script>

尝试观察者和发射的基础上，我看到在互联网上，但我实际上并没有得到它