How Laravel 9 works with VueJS 3 on Blade files? - vuejs3

Question

This is some files from my Laravel 5.8 project that has some Vue2 components.
I have created a new fresh installation of Laravel 9, Vue 3 and ViteJS.
Something is wrong and I can't figure out what.
Let's see some code:
The package.json:
{
"private": true,
"scripts": {
"dev": "vite",
"build": "vite build"
},
"devDependencies": {
"#popperjs/core": "^2.11.6",
"#vue/compat": "^3.1.0",
"axios": "^1.1.2",
"bootstrap": "^5.2.3",
"laravel-vite-plugin": "^0.7.2",
"lodash": "^4.17.19",
"postcss": "^8.1.14",
"sass": "^1.56.1",
"vite": "^3.0.0"
},
"dependencies": {
"#vitejs/plugin-vue": "^3.2.0",
"#vue/compiler-sfc": "^3.1.0",
"fsevents": "^2.3.2",
"jquery": "^3.6.3",
"laravel-echo": "^1.15.0",
"moment-timezone": "^0.5.40",
"pusher-js": "^8.0.1",
"tinymce": "^6.3.1",
"vue": "^3.2.45",
"vue-loader": "^15.10.1",
"vue-moment": "^4.1.0",
"vue-scrollto": "^2.20.0",
"vue-the-mask": "^0.11.1",
"vue-toasted": "^1.1.28"
}
}
The vite.config.js:
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '#vitejs/plugin-vue';
export default defineConfig({
plugins: [
laravel({
input: [
'resources/sass/app.scss',
'resources/js/app.js',
],
refresh: true,
}),
vue({
template: {
transformAssetUrls: {
base: null,
includeAbsolute: false,
},
},
}),
],
resolve: {
alias: {
vue: 'vue/dist/vue.esm-bundler.js',
},
},
});
This is a piece of my app.jsfile:
import Vue from 'vue';
import { createApp } from 'vue';
import UploadForm from './components/UploadForm.vue';
// ...
import './bootstrap';
const app = createApp({
components: {
UploadForm,
// ...
}
})
app.mount('#app')
export const bus = new Vue();
This is a part of < body > section of app.blade.phpfile:
<div id="app">
<div v-if="loader" class="loading" id="loader">Loading…</div>
#include('_inc.nav.topNav')
<main class="m-t-0">
#yield('content')
</main>
</div >
This is part of some.blade.php file:
#extends('layouts.app')
#section('content')
<div class="container m-b-100">
<!-- Content -->
</div>
#endsection
#section('scripts')
<script type="text/javascript" src="{{ asset('js/moment-with-locales.min.js') }}"></script>
<script>
const { createApp } = Vue;
const app = createApp({
el: '#app',
data: {
// some data, methods
}
});
app.mount('#app');
</script>
#endsection
At the Inspector Window the error is:
Uncaught TypeError: t.call is not a function
and it is pointing to:
app.mount('#app');