load compont in vueJS 3 in laravel 9

Question

i´m trying to do a component in laravel 9 and vueJS 3. And my component have a datatable and for this i´m using vue-good-table-next but i can´t show it in my blade i don´t know that i´m doing wrong.

in my web browser return this:

[Vue warn]: There is already an app instance mounted on the host container.
 If you want to mount another app on the same host container, you need to unmount the previous app by calling `app.unmount()` first.

in my webpack.mix.js i have this:

mix.js('resources/js/app.js', 'public/js')
            .vue()
            .postCss('resources/css/app.css', 'public/css', [
                //
            ]);

in my app.js i have this:

require('./bootstrap');


import { createApp } from "vue";
import datatableFisios from "./components/datatableFisios.vue";

createApp({
    components: {
        datatableFisios,
    },
}).mount("#app");

and my component it´s

<template>
  <div>
    <vue-good-table :columns="columns" :rows="rows"/>
  </div>
</template>

<script>
    export default {
        name: 'datatableFisios',
        mounted(){
            console.log(`The initial count is.`)
        },
        data(){
            return {
                
                columns: [
                    {
                        label: 'Name',
                        field: 'name',
                    },
                    {
                        label: 'Age',
                        field: 'age',
                        type: 'number',
                    },
                    {
                        label: 'Created On',
                        field: 'createdAt',
                        type: 'date',
                        dateInputFormat: 'yyyy-MM-dd',
                        dateOutputFormat: 'MMM do yy',
                    },
                    {
                        label: 'Percent',
                        field: 'score',
                        type: 'percentage',
                    },
                ],
                    rows: [
                        { id:1, name:"John", age: 20, createdAt: '',score: 0.03343 },
                        { id:2, name:"Jane", age: 24, createdAt: '2011-10-31', score: 0.03343 },
                        { id:3, name:"Susan", age: 16, createdAt: '2011-10-30', score: 0.03343 },
                        { id:4, name:"Chris", age: 55, createdAt: '2011-10-11', score: 0.03343 },
                        { id:5, name:"Dan", age: 40, createdAt: '2011-10-21', score: 0.03343 },
                        { id:6, name:"John", age: 20, createdAt: '2011-10-31', score: 0.03343 },
                    ],
                };
        },
    };
</script>

PD: it´s first time that i´m doing datatables with VUE, if anybody know any library better than this, say me please.

thanks for readme. and soyy for my bad english.

Answer 1

To resolve my problem i had to update vue-js-loader with this command npm update vue-loader with this i can mount my component and to do my datatable with vue-good-table-next