The graph cannot be displayed

I have used vue js and vue chart js latest version until now.
I tried drawing a Bar graph and edited the main.js file as follows

import { BarElement, CategoryScale, Chart as ChartJS, Legend, LinearScale, Title, Tooltip } from 'chart.js'
import { createApp } from 'vue'
import { Bar } from 'vue-chartjs'

ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)

const BarChart = {
    name: 'BarChart',
    components: { Bar },
    data() {
        return {
            chartData: {
                labels: ['January', 'February', 'March'],
                datasets: [
                    {
                        label: 'Data One',
                        backgroundColor: '#f87979',
                        data: [40, 20, 12]
                    }
                ]
            }
        }
    },
    template: '<Bar :data="chartData" />'
}
createApp(BarChart).mount('#app')

I only edited the main.js file. The remaining files remain unchanged by default when the project is first created. Running the npm run serve command, the graph cannot be displayed and I receive the error when opening Developer Tools Unchecked runtime.lastError: The message port closed before a response was received.

I want to code the graph in the main.js file but don’t want the code in the .vue file, how do I update the code?