How can I reset a component when the data changes?

[aguiagui5]

I need to reinitialize the component charts when 'props.data' changes too see the new values on the chart. Here is the code.
Thank you very much.

<template>
  <div class="grid col-span-3 rounded-lg shadow-lg overflow-hidden">
    <div class="bg-primary p-2">
      <h2 class="text-lg font-semibold">TIMELINE</h2>
    </div>
    <div class="bg-stone-100 p-2 flex justify-center items-center">
      <canvas ref="chartCanvas"></canvas>
    </div>
  </div>
</template>

<script lang="ts" setup>
const { t } = useI18n()
const props = defineProps({
  data: {
    type: Array,
    default: null,
  },
})
onMounted(async () => {
  const { Chart, initTE } = await import('tw-elements')
  initTE({ Chart }, { allowReinits: true })
  if (chartCanvas.value) {
    new Chart(chartCanvas.value, {
      type: 'bar',
      data: dataChartOptions,
      options: optionsChartOptions,
    })
  }
  // AÑADIMOS LOS VALORES DE PROPS.DATA EN EL GRÁFICO
  dataChartOptions.labels = props.data.map((item) => item.label)
  dataChartOptions.datasets[0].data = props.data.map((item) => item.value)
})

const chartCanvas = ref(null)

// Data
const dataChartOptions = {
  labels: [],
  datasets: [
    {
      label: t('leka.kpi.revenue'),
      data: [],
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(255, 159, 64, 0.2)',
      ],
      borderColor: [
        'rgba(255,99,132,1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(153, 102, 255, 1)',
        'rgba(255, 159, 64, 1)',
      ],
      borderWidth: 1,
      type: 'line',
    },
  ],
}

// Options
const optionsChartOptions = {
  scales: {
    x: {
      ticks: {
        color: '#4285F4',
      },
    },
    y: {
      ticks: {
        color: '#f44242',
      },
    },
  },
}
</script>

[juujisai]

Hi! You can use the update method that the Charts component provide. Provide the new dataset (and options if needed) as a parameters and invoke it on the Charts instance. If you are not changing options you have to provide an empty object as a second parameter (atleast for now).

Link to the methods section if needed:
https://tw-elements.com/docs/standard/data/charts/#api-section-methods

Checkout my snippet with example where I'm changing the dataset on button click:
https://tw-elements.com/snippets/tailwind/b-cylwik/5845533#html-tab-view