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

import { Line, mixins } from 'vue-chartjs';
const { reactiveProp } = mixins;

export default Line.extend({
  mixins: [reactiveProp],
  props: ['options'],
  mounted () {
    // this.chartData is created in the mixin.
    // If you want to pass options please create a local options object
    this.renderChart(this.chartData, this.options);
  }
});

borderColor: colorPool[index],
            backgroundColor: colorPool[index],
            data: dynamicData.cpus[index],
        });
    });

    return data;
}

function computedUsed(value) {
    var total = value.user + value.nice + value.sys + value.idle + value.irq;
    var cpu = ((total - value.idle) / total) * 100;
    return cpu;
}

let line = Line.extend({
    mixins: [reactiveProp],
    props: ['options'],
    mounted() {
        this.renderChart(this.chartData, {
            title: {
                display: true,
                text: 'CPUs Used',
            },
            tooltips: {
                callbacks: {
                    label: (item, data) => {
                        let label = data.datasets[item.datasetIndex].label;
                        return label + ': ' + Math.floor(item.yLabel * 100) / 100 + ' %';
                    }
                }
            },

borderColor: "rgba(54, 162, 235, 1)",
                backgroundColor: 'rgba(54, 162, 235, 0.4)',
                data: dynamicData.freeMemData,
            },
            {
                label: 'usedMem',
                pointStyle: 'line',
                borderColor: "rgba(255, 99, 132, 1)",
                backgroundColor: 'rgba(255, 99, 132, 0.4)',
                data: dynamicData.usedMemData,
            }
        ]
    };
}

let line = Line.extend({
    mixins: [reactiveProp],
    props: ['options'],
    mounted() {
        this.renderChart(this.chartData, {
            title: {
                display: true,
                text: 'OS Memory Stat',
            },
            tooltips: {
                callbacks: {
                    label: (item) => (Math.floor(item.yLabel * 100) / 100 + ' MB')
                }
            },
            animation: false
        })
    }

function convertHex (hex, opacity) {
  hex = hex.replace('#', '')
  const r = parseInt(hex.substring(0, 2), 16)
  const g = parseInt(hex.substring(2, 4), 16)
  const b = parseInt(hex.substring(4, 6), 16)

  const result = 'rgba(' + r + ',' + g + ',' + b + ',' + opacity / 100 + ')'
  return result
}

function random (min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min)
}

export default Line.extend({
  props: ['height'],
  mounted () {
    var elements = 27
    var data1 = []
    var data2 = []
    var data3 = []

    for (var i = 0; i <= elements; i++) {
      data1.push(random(50, 200))
      data2.push(random(80, 100))
      data3.push(65)
    }
    this.renderChart({
      labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S'],
      datasets: [
        {