Tengo Chart.js Chart en un componente Vue usando vue3-chart-v2. Todo funciona bien hasta que quiero actualizar los datos.

En este momento, estoy usando un observador para verificar si los datos cambian. Esto funciona, pero actualizar el gráfico no. Mi idea era destruir el gráfico cuando los datos han cambiado y volver a renderizarlo con los nuevos datos.

He visto algunas preguntas en la pila usando mixins reactiveData/reactiveProp pero de alguna manera no puedo acceder a ellas usando vue3-chart-v2, solo recibo un error.

podria alguien ayudarme? Esta es mi primera pregunta aquí en la pila

Mi código:

 <script> import { defineComponent } from 'vue'; import { Doughnut } from 'vue3-chart-v2'; export default defineComponent({ name: 'PieChart', extends: Doughnut, props: { carbonData: Object }, data() { return { chartData: { labels: ['Slabs', 'Columns', 'Foundation', 'Core'], datasets: [ { data: [ this.carbonData.slabs, this.carbonData.columns, this.carbonData.foundation, this.carbonData.core ], backgroundColor: ['#8FBC8F', '#87CEFA', '#CD853F', '#e64e3e'], borderWidth: 1, } ] }, options: { responsive: true, maintainAspectRatio: false, legend: { position: 'right', } } } }, mounted () { this.renderPieChart(); }, methods: { renderPieChart() { this.renderChart(this.chartData, this.options); } }, watch: { carbonData : { deep: true, handler() { this.state.chartObj.destroy(); this.renderChart(this.chartData, this.chartOptions); }, } }, }) </script>