Chart not updating when I use Chartkick

I have an issue where I get my data in my mount function and then I calculate some hashes in the computed section. I can get the charts with chartkick to update after I change their data field in the template but after that It just gives me a blank chart. Does anyone know why its not updating correctly? I know my hashes have the correct data as I’m viewing it before my chart is suppose to render. Any direction would be great.

    <v-card class="mt-3 mx-auto" max-width="500">
        class="v-sheet--offset mx-auto"
        max-width="calc(100% - 32px)"
        <line-chart :data="dates"></line-chart>

      <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>
    <p>108J View</p>
import axios from "axios";

export default {
  name: "E108J",
  components: {},
  data() {
    return {
      value: [246, 446, 675, 510, 590, 610, 760],
      datas: [],
      dates: {},
      lead: [],
      datesnlead: {}
  mounted() {
      .then(response => (this.datas =;
  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;

Is there any warning in the console?
I think this is about life cycle issues.
You can try to get the data using the created hook.