How to use the vue-chartjs.Bar.extend function in vue-chartjs

// import 'chart.js'
import {Bar} from 'vue-chartjs'

export default Bar.extend({
  mounted () {
    this.renderChart({
      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
      datasets: [
        {
          label: 'Data One',
          backgroundColor: '#f87979',
          data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
        }
      ]
    }, {responsive: true, maintainAspectRatio: false})
  }
})

import {
  Bar
} from 'vue-chartjs'

export default Bar.extend({
  mounted () {
    // Overwriting base render method with actual data.
    this.renderChart({
      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
      datasets: [{
        label: 'GitHub Commits',
        backgroundColor: '#e91e63',
        data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
      }]
    })
  }
})

'#8D6E63',
                ],
                borderWidth: 2,
                data: [
                    space.newSpace,
                    space.oldSpace,
                    space.codeSpace,
                    space.mapSpace,
                    space.largeObjectSpace,
                ],
            },
        ]
    };
}

let bar = Bar.extend({
    mixins: [reactiveProp],
    props: ['options'],
    mounted() {
        this.renderChart(this.chartData, {
            legend: {
                display: false,
            },
            tooltips: {
                callbacks: {
                    label: function (item, data) {
                        return Math.floor(item.xLabel * 100) / 100 + ' %';
                    }
                }
            },
            scales: {
                xAxes: [{