Vue-chartjs 渲染不一致且不响应

Question

我正在使用 Vue-chartjs 并创建了两个 vue 组件，每个组件用于条形图和折线图。我的数据源是SharePoint。我可以看到我的图表，但问题是图表没有响应。它们被放大并相互叠置。

我将道具从父级传递到每个组件（包括选项），但没有用。

这是我的 vue 实例代码和条形图组件的摘录

new Vue({
  el: "#app",
  vuetify: new Vuetify(),
  data: {
    ChartConfig: {
      labels: [],
      datasets: [
        {
          data: [],
          backgroundColor: '#3498db',
          borderColor: 'rgba(136,136,136,0.5)',
          label: "2013"
        }
      ]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      title: {
        display: true,
        text: 'Chart.js Line Chart'
      },
      tooltips: {
        mode: 'index',
        intersect: false,
      },
      hover: {
        mode: 'nearest',
        intersect: true
      },
      scales: {
        xAxes: [{
          display: true,
          categoryPercentage: 0.5,
          scaleLabel: {
            display: true,
            labelString: 'Month'
          }
        }],
        yAxes: [{
          display: true,
          scaleLabel: {
            display: true,
            labelString: 'Value'
          }
        }]
      }
    },

条形图组件

Vue.component('my-bar-chart', {
    extends: VueChartJs.Bar,
    props: ['barData', 'chartOptions'],
    mounted: function () {
        this.renderChart(this.barData, this.chartOptions);
    }
})

html

<my-bar-chart :bar-data="ChartConfig" :chart-options="options"></my-bar-chart>

我能够用这支笔重复这个问题