使用Chartkick的Vue应用程序无法正确更新图表

Question

我知道我的挂载和计算方法可以正常工作，因为我可以将其发送出去进行显示，但是我的图形仅在将模板中的数据值更改为正确的值一次并不再渲染后才渲染。我应该使用method以便每次都计算它，还是需要为此问题使用Vuex？谢谢

<template>
  <v-app>
    {{getDates}}
    <v-card class="mt-3 mx-auto" max-width="500">
      <v-sheet
        class="v-sheet--offset mx-auto"
        color="cyan"
        elevation="12"
        min-width="125%"
        max-width="calc(100% - 32px)"
      >
        <line-chart :data="dates"></line-chart>
      </v-sheet>

      <v-card-text class="pt-0">
        <div class="title font-weight-light mb-2">Lead</div>
        <div class="subheading font-weight-light grey--text">TEST TEXT</div>
        <v-divider class="my-2"></v-divider>
        <v-icon class="mr-2" small>mdi-clock</v-icon>
        <span class="caption grey--text font-weight-light">TEST TEXT</span>
      </v-card-text>
    </v-card>
    <p>108J View</p>
  </v-app>
</template>

<script>
import axios from "axios";

export default {
  name: "E108J",
  components: {},
  data() {
    return {
      value: [246, 446, 675, 510, 590, 610, 760],
      datas: [],
      dates: {},
      lead: [],
      datesnlead: {}
    };
  },
  mounted() {
    axios
      .get("http://localhost:3000/E108J")
      .then(response => (this.datas = response.data));
  },
  computed: {
    getDates() {
      for (let i = 0; i < this.datas.length; i++) {
        this.dates[this.datas[i].date] = this.datas[i].lead;
      }
      return this.dates;
    },
    getLead() {
      for (let i = 0; i < this.datas.length; i++) {
        this.lead[i] = this.datas[i].lead;
      }
      return this.lead;
    }
  }
};
</script>