title: Rerender chart via changing data Vue-chartjs
body: <p>I am trying to update my chart by changing data. I was trying to do it, by following this example <a href="https://stackoverflow.com/questions/43728332/vue-chart-js-chart-is-not-updating-when-data-is-changing">Vue Chart.js - Chart is not updating when data is changing</a> But I experienced some problems. First of all these errors in dev tools 1. Missing required prop: "chartData". 2. The computed property "chartData" is already defined as a prop. I am a novice in this framework and I would be grateful if u don't mark this question as duplicated and if u give me some tips to solve this issue.</p>
  
  <pre><code>&lt;template&gt;
   &lt;bar-chart :data="dataChart" :options="{responsive: true, maintainAspectRatio: false}"&gt;&lt;/bar-chart&gt; // Bar chart
   &lt;button class="click" @click="changeUi"&gt;Change chart&lt;/button&gt;// Button 
  &lt;/template&gt;
  &lt;script&gt;
   import Bar from '../Charts/Bar'
     export default {
       data(){
         return{
           dataChart: [44, 49, 48, 49, 55, 47, 43, 55, 53, 43, 44, 51]// data displayed by default   
      },
      components:{
        'bar-chart' : Bar
      },
      methods:{
        changeUi(){
          this.dataChart = [36, 46, 33, 35, 44, 36, 46, 43, 32, 65, 15, 46];// this data should be displayed after clicking button
        }
      }
    }
  }
  &lt;/script&gt;
  
  // Bar.js
  import {Bar, mixins } from 'vue-chartjs'
  const { reactiveProp } = mixins;
  
  export default {
      extends: Bar,
      mixins: [reactiveProp],
      props: ["data", "options"],// recieving props
      mounted() {
          this.renderBarChart();
      },
      computed: {
          chartData: function() {
              return this.data;
          }
      },
      methods: {
        renderBarChart: function() {
           this.renderChart({
             labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
               datasets: [{
                 label: 'Data One',
                 backgroundColor: '#505464',
                 hoverBackgroundColor: '#2196f3',
                 data: this.chartData
                          }
                      ]
                  },
                  { responsive: true, maintainAspectRatio: false }
              );
          }
      },
      watch: {
          data: function() {
              this._chart.destroy();
              this.renderBarChart();
          }
      }
  }
  </code></pre>