[Chartjs]-How to Render Chart Datasets in Vue?

Use watch inside your BarChart component as below:

watch:{
    chartData:function(newVal,OldVal){
        //assign chart data
    },
  },

Afterwards you need to execute the method where your bar chart data could be updated. Below will be the full snippet.

import { Bar } from "vue-chartjs";
export default {
    name: "BarChart",
    extends: Bar,
    data() {
        return {};
    },
    props: {
        label: {
            type: Array,
        },
        chartData: {
            type: Array,
        },
        options: {
            type: Object,
        },
    },
    watch: {
        chartData: function (newVal, OldVal) {
            this.updateChart()
        },
    },
    mounted() {
        this.updateChart()
    },
    methods: {
        updateChart() {
            const dates = this.chartData.map((d) => d.date);
            const totalCheckIn = this.chartData.map((d) => d.totalCheckIn);
            const totalCheckOut = this.chartData.map((d) => d.totalCheckout);
            this.renderChart(
                {
                    labels: dates,
                    datasets: [
                        {
                            label: this.label[0],
                            data: totalCheckIn,
                        },
                        {
                            label: this.label[1],
                            data: totalCheckOut,
                        },
                    ],
                },
                this.options
            );
        }
    }
};