title: vue-chartjs reactive data error
body: <p>I am trying to use reactive data mixin for <a href="http://vue-chartjs.org/#/home?id=reactive-data" rel="noreferrer">vue-chartjs</a></p>
  
  <p>The mounted function to set the initial data is working and I can see the chart correctly using the API response:</p>
  
  <pre><code>fetchSessionTrends() {
      axios.get(endpoint)
      .then(({data}) =&gt; {
          this.sessions = data.map(session =&gt; session.sessions);
          this.sessionLabels = data.map(label =&gt; label.date);
          this.loaded = true;
      });
  },
  </code></pre>
  
  <p>The data:</p>
  
  <pre><code>data() {
      return {
         endpoint: 'public/api/sessions',
         sessions: [],
         sessionLabels: [],
         loaded: false,
         daysFilter: 14
      };
  },
  </code></pre>
  
  <p>I am display the chart with a text field to provide the reactive portion - expectation is that it calls the endpoint again and receives new response</p>
  
  <pre><code>&lt;div class="col-md-2 session-filter"&gt;
      &lt;div class="input-group"&gt;
      &lt;input type="text" class="form-control" placeholder="days..." v-model="daysFilter"&gt;
      &lt;span class="input-group-btn"&gt;
        &lt;button class="btn btn-secondary" type="button" @click="refreshSessions"&gt;Go&lt;/button&gt;
      &lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;line-chart v-if="loaded" :chart-data="sessions" :chart-labels="sessionLabels"&gt;&lt;/line-chart&gt;
  </code></pre>
  
  <p>To test the reactive part however, for now I am simply changing the data arrays directly to see how it works:</p>
  
  <pre><code>refreshSessions() {          
     this.sessions = [1, 2, 3];
     this.sessionlabels = ["june", "july", "august"];  
  },
  </code></pre>
  
  <p>Right, so this is giving me the errors</p>
  
  <pre><code>[Vue warn]: Error in callback for watcher "chartData": "TypeError: Cannot read property 'map' of undefined" found in ....
  
   TypeError: Cannot read property 'map' of undefined
  </code></pre>
  
  <p>LineChart.js is as described in the docs, abbreviated here for space</p>
  
  <pre><code>import { Line, mixins } from 'vue-chartjs';
  const { reactiveProp } = mixins
  
  extends: Line,
  mixins: [reactiveProp],
  props: {
   chartData: {
     type: Array,
     required: true
   },
   chartLabels: {
     type: Array,
     required: true
   }
  },
  
  mounted() {
    this.renderChart({
      labels: this.chartLabels,
      datasets: [
        {
          label: 'sessions',
          data: this.chartData
        }
      ]
    }, this.options)
  }
  </code></pre>
  
  <p>So, chart is initially working fine but I can't seem to get the reactive part working.</p>