My PieChart doesn't updated, when data changed

Question

I am trying to make a VueJs chart, when I add the data, The props pass correctly to the PieChart component but it doesn't reflect on PieChart. Only changes reflect when I try to change something on VScode and save it that it appears suddenly. I am trying to make, when I added the data, the PieChart component should update itself directly and show the updated value on the chart.

The data comes from here from an API

   async created() {
    this.loaded = false;

    try {
      const response = await fetch(
        'https://api2.binance.com/api/v3/ticker/24hr'
      );
      const data = await response.json();
      await data.forEach(element => {
        // console.log(element.symbol, element.lastPrice);
        this.chartData.symbols = [...this.chartData.symbols, element.symbol];
        // We take the volume
        this.chartData.price = [...this.chartData.price, +element.lastPrice];
      });

      // console.log(this.chartData.symbols);
      this.loaded = true;
    } catch (e) {
      console.error(e);
    }
  },
};

My data and computed value to iterating values and passing them into component

    chartData: {
      labels: ['Vue', 'React', 'Angular'],
      symbols: [],
      price: [],
      datasets: [
        {
          data: [10, 20, 30],
          backgroundColor: [
            '#41B883',
            '#E46651',
            '#20AB2E',
            '#DD1B16',
            '#DD26FF',
            '#9ab973',
            '#ff4c4c',
          ],
        },
      ],
    },
  }),
  computed: {
    pairs() {
      return this.chartData.symbols.map((symbol, i) => {
        return {
          symbol: symbol,
          price: this.chartData.price[i],
        };
      });
    },
  },

PieChart component

 <PieChart
          :data="this.chartData.datasets[0].data"
          :bgColor="this.chartData.datasets[0].backgroundColor"
          :labels="this.chartData.labels"
          :loaded="(this.loaded = true)"
        />

And Piechart.vue file

<template>
  <Pie
    v-if="loaded"
    id="my-chart-id"
    :options="chartOptions"
    :data="chartData"
  />
</template>

<script>
import {Chart as ChartJS, ArcElement, Tooltip, Legend} from 'chart.js';
import {Pie} from 'vue-chartjs';

ChartJS.register(ArcElement, Tooltip, Legend);

export default {
  name: 'PieChart',
  components: {Pie},
  props: ['data', 'bgColor', 'labels'],
  data() {
    return {
      chartData: {
        labels: this.labels,
        datasets: [
          {
            data: this.data,
            backgroundColor: this.bgColor,
          },
        ],
      },
      chartOptions: {
        responsive: true,
        elements: {
          arc: {
            borderWidth: 0,
          },
        },
      },
      loaded: true,
    };
  },
  methods: {},

  watch: {
    'chartData'(to, from) {
      this.renderChart(this.chartData, this.options);
    },
  },
};
</script>

Answer 1

I found the answer. I used :key="this.chartData.labels.length" property on my piechart and it directly updates the chart.