Vue chart.js not displaying data on load

I'm using vue-chartjs with Laravel, and I have a problem where the data isn't loaded when on load. But when I click 3x on Legend the data shows up.

Here is gif: https://gfycat.com/gifs/detail/SimilarShockedAffenpinscher

My code:

<template>
    <Chart :chartData="this.data" :width="800" :height="500"></Chart>
</template>
<script>
    import Chart from './Chart.vue';

    export default {
      name: 'home',
      components: {
        Chart
      },
      data() {
        return {
            data: {},
            weights: [],
            dates: []
        }
      },
      mounted () {
        this.render()
      },
      methods: {
        render() {
            self = this
            axios.get('/api/data')
              .then(function (response) {
                for (var i = 0; i < response.data.data.length; i++) {
                    self.weights.push(response.data.data[i].kg)
                    self.dates.push(response.data.data[i].created_at)
                }
                console.log(response)
              })
              .catch(function (error) {

                console.log(error);
              });
            // Overwriting base render method with actual data.
          self.data = {
            labels: self.dates,
            datasets: [
              {
                label: 'Data One',
                data: self.weights,
              }
            ]
          }
        }
      }
    }
</script>

Chart.vue:

<script>
    import VueCharts from 'vue-chartjs'
    import { Bar, Line, mixins } from 'vue-chartjs'
    import moment from 'moment'
    import axios from 'axios'
    export default {
      extends: Bar,
      mixins: [mixins.reactiveProp],
      props: ['chartData', 'options'],
      data() {
        return {

        }
      },
      mounted () {
        this.renderChart(this.chartData, this.options)
      },
      methods: {
      }
    }
</script>