Error when changing data after migrating to vue-chartjs 4

Question

I am migrating from vue-chartjs 3 to 4. I have a LineChart component that I migrated to the last version of VueChart (I put the template section and removed the draw method calls.

This component is used for 2 charts. When I close the first one and want to display the second one, I have a console error:

[Vue warn]: Error in callback for watcher "chartData": "TypeError: Cannot read properties of undefined (reading 'destroy')"

What can be the problem here?

Thanks!

<template>
  <line :chart-data="chartData" />
</template>

<script>
import 'chart.js/auto'
import { Line } from 'vue-chartjs/legacy'

export default {
  name: 'AppLineChart',
  components: { Line },
  props: {
    chartData: {
      type: Object,
      required: true,
    },
}
</script>

Answer 1

The same happened to me, i render my charts in mounted, the solution to me was put my render of the second chart in created instead mounted, i don´t know what happend but the error disappeared :/