javascript - 当道具永远不会改变时，vue-chartjs组件中的“避免改变道具”警告

Question

我正在根据他们的示例从vue-chartjsBar扩展组件：

// MyChart.js
import { Bar } from 'vue-chartjs'

export default Bar.extend({
  props: ['reportData'],
  data() {
    return {
      chartData: this.reportData,
    }
  },
  mounted() {
    this.renderChart(this.chartData);
  },
})

testData但是当像这样使用组件时，当传入的变量发生变化时，我会收到“避免改变道具”错误：

<my-chart :report-data="testData"></my-chart>

避免直接改变 prop，因为只要父组件重新渲染，该值就会被覆盖。相反，使用基于道具值的数据或计算属性。正在变异的道具：“reportData”

我怎么能改变reportData道具？