How to use the vue-chartjs.mixins.reactiveProp function in vue-chartjs

import Chart from 'chart.js'
import { Line, mixins } from 'vue-chartjs'
import tailwindConfig from '@tailwind'

Chart.defaults.global.defaultFontFamily = tailwindConfig.fonts.sans.join(',')
// TODO: Add theme colors

export default {
  extends: Line,

  mixins: [mixins.reactiveProp],

  props: {
    chartData: {
      type: Object,
      required: true
    },
    options: {
      type: Object,
      required: true
    }
  },

  mounted () {
    this.$once('chart:render', () => {
      this.$emit('ready')
    })

import { mixins } from 'vue-chartjs'
import { defaultConfig } from '../VaChartConfigs'

export const chartMixin = {
  mixins: [mixins.reactiveProp],
  props: ['data', 'chartOptions'],
  mounted () {
    this.refresh()
  },
  methods: {
    refresh () {
      this.renderChart(this.chartData, this.options)
    },
  },
  computed: {
    // `this.options` is used by vue-chartjs mixin on refresh.
    options () {
      return Object.assign({}, defaultConfig, this.chartOptions)
    },
  },
}

import { Bar, mixins } from "vue-chartjs";

export default {
  name: "bar-chart",
  extends: Bar,
  mixins: [mixins.reactiveProp],
  props: {
    extraOptions: Object,
    gradientColors: {
      type: Array,
      default: () => [
        "rgba(72,72,176,0.2)",
        "rgba(72,72,176,0.0)",
        "rgba(119,52,169,0)"
      ],
      validator: val => {
        return val.length > 2;
      }
    },
    gradientStops: {
      type: Array,
      default: () => [1, 0.4, 0],

import { Doughnut, mixins } from 'vue-chartjs'

export default {
  extends: Doughnut,
  mixins: [mixins.reactiveProp],
  props  : ['chartData', 'options'],
  data(){
    return {
      defaultOptions: {
        responsive: true,
        maintainAspectRatio: false,
        //rotation: -Math.PI,
        //circumference: Math.PI,
        cutoutPercentage: 70,
        legend: {
          display :true,
          position:'right'
        },
        animation: {
          animateRotate: true,
          animateScale: false

borderWidth: 2,
      backgroundColor: 'transparent',
    },
    point: {
      radius: 0,
      hoverRadius: 0,
      hitRadius: 0,
    },
  },
  events: [],
};

export default {
  extends: Line,

  mixins: [mixins.reactiveProp],

  props: {
    chartData: {
      type: Object,
      default: () => ({ datasets: [] }),
    },
    secondaryAxis: {
      type: Boolean,
      default: false,
    },
  },

  computed: {
    options() {
      const options = objectAssignDeep({}, chartOptions);
      if (this.secondaryAxis) {

<img height="70" width="70"><h3>{{inst.name}}</h3>
                    <h4>deposited:{{inst.deposited}}</h4>
                    deposit
                    uninstall
                    
                
            
        
    
    `
}

const Bar_Chart = {
    name:'Bar_Chart',
    extends: Bar,
    mixins: [mixins.reactiveProp],
    props: ['chartData','options'],
    mounted(){
        this.renderChart(this.chartData,this.options)
    },
    watch:{
        data:function(val){
            this.renderChart(this.chartData,this.options)
        },
        options:function(val){
            this.renderChart(this.chartData,this.options)
        }
    }
};
Vue.component('Bar_Chart',Bar_Chart);