title: Make Chartkick wait for data to populate from Firebase before rendering chart
body: <p>I'm using chartkick in my Vue project. Right now, the data is loading from Firebase after the chart has rendered, so the chart is blank. When I change the code in my editor, the chart renders as expected, since it's already been retrieved from Firebase. Is there a way to make chartkick wait for the data to load before trying to render the chart? Thanks!</p>
  
  <p>Line-Chart Component:</p>
  
  <pre><code>&lt;template&gt;
    &lt;div v-if="loaded"&gt;
      &lt;line-chart :data="chartData"&gt;&lt;/line-chart&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    name: 'VueChartKick',
    props: ['avgStats'],
    data () {
      return {
        loaded: false,
        chartData: this.avgStats
      }
    },
    mounted () {
      this.loaded = true
    }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>Parent: </p>
  
  <pre><code>&lt;template&gt;
    ...
    &lt;stats-chart v-if="avgStatsLoaded" v-bind:avgStats="avgStats" class="stat-chart"&gt;&lt;/stats-chart&gt;
    &lt;div v-if="!avgStatsLoaded"&gt;Loading...&lt;/div&gt;
    ...
  &lt;/template&gt;
  
  &lt;script&gt;
  import StatsChart from './StatsChart'
  
  export default {
    name: 'BBall',
    props: ['stats'],
    components: {
      statsChart: StatsChart
    },
    data () {
      return {
        avgStatsLoaded: false,
        avgStats: []
      }
    },
    computed: {
      sortedStats: function () {
        return this.stats.slice().sort((a, b) =&gt; new Date(b.date) - new Date(a.date))
      }
    },
    methods: {
      getAvgStats: function () {
        this.avgStats = this.stats.map(stat =&gt; [stat.date, stat.of10])
        this.avgStatsLoaded = true
      }
    },
    mounted () {
      this.getAvgStats()
    }
  }
  </code></pre>