Vue.js 使用vue morris更新图表上的数据无效？

我试图更新vue morris创建的图表上的数据，但我的图表显示未定义的值

这是我的代码：

<template>
  <div id="app">
    <h1>Bar chart</h1>
    <bar-chart
      id="bar"
      :data="barData"
      :bar-colors="arrayColors"
      :xkeys="xkeys"
      :ykeys="ykeys"
      grid="true"
      resize="true"
      grid-text-weight="bold"
    >
    </bar-chart>
  </div>
</template>
<script>
import { BarChart } from "vue-morris";
export default {
  data() {
    return {
      barData: [
        { year: "2012", car: 40, motorcycle: 300, airplane: 60 },
        { year: "2013", car: 150, motorcycle: 280, airplane: 70 },
        { year: "2014", car: 100, motorcycle: 150, airplane: 30 },
        { year: "2015", car: 100, motorcycle: 390, airplane: 90 },
      ],
      xkeys: ["year"],

      arrayColors: ["#5859f9", "#73c000", "#cc45ff"],
      ykeys: ["car", "motorcycle", "airplane"],
    };
  },
  components: {
    BarChart,
  },
};
</script>

条形图
从“vue morris”导入{BarChart}；
导出默认值{
数据（）{
返回{
巴达塔：[
{年份：“2012年”，汽车40辆，摩托车300辆，飞机60架}，
{年份：“2013年”，汽车：150辆，摩托车：280辆，飞机：70辆}，
{年份：“2014年”，汽车：100辆，摩托车：150辆，飞机：30辆}，
{年份：“2015年”，汽车：100辆，摩托车：390辆，飞机：90辆}，
],
xkeys:[“年”]，
阵列颜色：[“#5859f9”、“#73c000”、“#cc45ff”]，
ykeys:[“汽车”、“摩托车”、“飞机”]，
};
},
组成部分：{
柱状图，
},
};

那你知道为什么它显示我不确定的样子吗？如何更改图表上的数据