Приложение Vue, использующее Chartkick Не корректно обновляет диаграмму

Question

Я знаю, что мои методы монтирования и вычисления работают, поскольку я могу отправить их для отображения, но мой график отображается только после того, как я изменил значение данных в шаблоне на правильное значение один раз, и не отображал его снова. Должен ли я использовать метод, чтобы он вычислял его каждый раз, или мне нужно использовать 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>