Vue.js 在 Vuejs 中更新 Chartjs 图表数据集

非常感谢您的支持 我想在单击按钮时更新Chartjs数据集

下面是我的代码

<template>
  <v-card>
    <v-layout>
      <v-main style="height: 250px">
        <v-btn @click="DataSetOne">Add Chart</v-btn
        ><v-btn @click="DataSetTwo">Change Data</v-btn>
        <canvas id="myChart6" style="height: 400px"> </canvas>
      </v-main>
    </v-layout>
  </v-card>
</template>

<script>
import Chart from "chart.js/auto";

export default {
  name: "HomeView",
  components: {},
  data: () => ({}),
  watch: {},
  computed: {},
  methods: {
    DataSetTwo() {
      let myChart6 = document.getElementById("myChart6"), config;
      myChart6.data.datasets[0].data = [58, 12, 6, 9, 12, 3, 9, 2];
      myChart6.update();
    },
    DataSetOne() {
      let labels = [1, 2, 3, 4, 5, 6, 7, 9];
      let data = {
        labels: labels,
        datasets: [
          {
            type: "line",
            label: "Graph",
            backgroundColor: "rgb(171, 235, 198)",
            borderColor: "rgb(171, 235, 198)",
            data: [8, 12, 6, 9, 12, 3, 9, 2],
            hidden: false,
          },
        ],
      };
      let config = {
        data: data,
        options: {
          scales: {
            y: {
              beginAtZero: true,
            },
          },
        },
      };
      let myChart6 = new Chart(document.getElementById("myChart6"), config);
      myChart6;
    },
  },
  mounted() {},
};
</script>

它给了我错误

我试过chart.update()，chart.销毁()，但它不起作用，我可以让它在普通的JS中工作，但不能在Vuejs中工作，需要你的支持使Chartjs的数据集在Vuejs中更新