Vue 3 chart js cause Cannot read properties of null (reading 'getContext')?

Question

[roaddd]

У меня есть кнопка, которая переключает данные, передаваемые в этот ChartComponent. Если удерживать несколько секунд после переключения и повторного переключения, это работает, но если мы делаем это немного быстро, это error Cannot read properties of null (reading 'getContext')? error.

<template>
  <canvas></canvas>
</template>

<script>
import { defineComponent } from 'vue'
import Chart from 'chart.js/auto'

export default defineComponent({
  name: 'ChartComponent',
  props: {
    type: {
      type: String,
      required: true,
    },
    data: {
      type: Object,
      required: true,
    },
    options: {
      type: Object,
      default: () => ({}),
    },
  },
  data: () => ({
    chart: null,
  }),
  watch: {
    data: {
      handler() {
        this.chart.destroy()
        this.renderChart()
      },
      deep: true,
    },
  },
  mounted() {
    this.renderChart()
  },
  methods: {
    renderChart() {
      this.chart = new Chart(this.$el, {
        type: this.type,
        data: this.data,
        options: this.options,
      })
    },
  },
})
</script>