Graph.vue

<template>
    <div>
        <canvas :id="id" @click="test($event)"></canvas>
    </div>
</template>

<script>
import Chart from 'chart.js/auto'

export const chartTypes = [
    'line',
    'bar',
    'doughnut',
    'bubble',
    'scatter',
    // 'radar',
    // 'polarArea'
]

export default {
    props: {
        id: {
            type: String,
            default : 'my-chart',
            required: true
        },
        type: {
            type: String,
            default: 'line',
            required: true,
            validator: function (value) {
                return chartTypes.indexOf(value) !== -1
            }
        },
        data: {
            type: Object,
            default: undefined,
            required: true
        },
        options: {
            type: Object,
            default: undefined
        }
    },
    data() {
        return {
            chart: undefined,
            chartData: {
                type: this.type,
                data: this.data,
                options: this.options
            }
        }
    },
    methods: {
        createChart() {
            this.chart?.destroy()
            this.chart = new Chart(document.getElementById(this.id), this.chartData)
        }
    },
    mounted() {
        this.createChart()
    },
    watch: {
        type: {
            handler(n,o) {
                this.chartData.type = n
                this.createChart()
            }
        },
        data: {
            handler(n,o){
                this.chartData.data = n
                this.createChart()
            }
        },
        options: {
            handler(n,o) {
                this.chartData.options = n
                this.createChart()
            }
        }
    }
}
</script>