问通过更改数据Vue-chartjs重现图表

EN

<template>
 <bar-chart :data="dataChart" :options="{responsive: true, maintainAspectRatio: false}"></bar-chart> // Bar chart
 <button class="click" @click="changeUi">Change chart</button>// Button 
</template>
<script>
 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
      }
    }
  }
}
</script>

// 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();
        }
    }
}