title: Vue chart.js not displaying data on load
body: <p>I'm using <code>vue-chartjs</code> 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.</p>
  
  <p>Here is gif: <a href="https://gfycat.com/gifs/detail/SimilarShockedAffenpinscher" rel="nofollow noreferrer">https://gfycat.com/gifs/detail/SimilarShockedAffenpinscher</a></p>
  
  <p>My code:</p>
  
  <pre><code>&lt;template&gt;
      &lt;Chart :chartData="this.data" :width="800" :height="500"&gt;&lt;/Chart&gt;
  &lt;/template&gt;
  &lt;script&gt;
      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 &lt; 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,
                }
              ]
            }
          }
        }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>Chart.vue:</p>
  
  <pre><code>&lt;script&gt;
      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: {
        }
      }
  &lt;/script&gt;
  </code></pre>