VueJS 2 to VueJS 3 and Vite on Laravel 9

Looks like VueJS 3 uses a different syntax than VueJS 2. Let's see some code:

#Here is the blade file:

@extends('layouts.app')
@section('content')
<div class="container m-b-100">
    <h1 class="m-t-10">Atendimento @if(Laratrust::hasRole('Administrator'))<a href=""
            class="btn btn-primary btn-sm float-right m-t-10"><i class="fa fa-user-plus m-r-10"></i> Cadastrar Nova
            Atendimento</a>@endif</h1>
    <hr>
    <div class="row">
        <div class="col-3">
            <!-- some content -->
        </div>
        <div class="col-9">
            @if($leads->isEmpty())
            Não há trabalho pra você hoje!
            <picture>
                <img src="{{ asset(" /images/no-work-today.png") }}" alt="Não há trabalho pra você hoje!"
                    class="img-responsive">
            </picture>
            @endif
            <atendimentos :atendimentos="atendimentos"></atendimentos>
        </div>
    </div>
</div>
@endsection
@section('scripts')
<script type="text/javascript" src="{{ asset('js/moment-with-locales.min.js') }}">
    // LOOKS THIS PART IS NOW DIFFERENT!!!
    new Vue({
    el: '#app',
    data: {
        noimg: 'no-img.png',
        leads: {!! $leads !!},
        datas: null,
        selectedDay: null,
        attributes: [
            {
                key: 'today',
                highlight: {
                    backgroundColor: '#ff8080',
                },
                contentStyle: {
                    color: '#fafafa',
                },
                dayContentHover: {
                        backgroundColor: '#d3d3d3',
                        cursor: 'pointer',
                        width:'3.5rem',
                        height:'3.5rem',
                },
                popover: {
                    // label: 'You just hovered over today\'s date!',
                },
                dates: [{!! $str !!}],
                daymouseover: {
                    cursor: 'pointer',
                },
            },
        ],
    },
    methods: {
        marcarLido() {
            //something
    },
        dayClicked(day) {
            //something
        },
    },
    computed: {
        //something
    },
    created() {
        //something
        }
    });
</script>
@endsection

#Here is app.js file:

import { createApp } from 'vue';
import Atendimentos from './components/Atendimentos.vue';
import UploadForm from './components/UploadForm.vue';

createApp({
  components: {
    Atendimentos,
    UploadForm
  }
}).mount("\\#app");

#And the app.blade.php:

<!DOCTYPE html>
<html lang="pt_BR">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="userId" content="{{ Auth::check() ? Auth::user()->id : '' }}">
        <meta name="google-site-verification" content="mTijjSKr1tmcFVh0FedvMv7rEnbwjkcZjaLy4f9dxWU" />
        <!-- CSRF Token -->
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <title>{{ config('app.name', 'Laravel') }}</title>
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
        <!-- Styles -->
        @if(app()->environment() === 'local')
            <!-- Vite Styles -->
            @vite( 'resources/css/app.css' )
        @else
            <link href="{{ asset('css/app.css') }}" rel="stylesheet">
        @endif
        <link href="{{ asset('css/loader.css') }}" rel="stylesheet">
		@yield('style')
        <style>
            body {
                font-size: 0.8rem;
            }
            #term {
                padding: 0;
                height: auto;
                border: none;
                padding-left: 10px;
                padding-bottom: 2px;
                font-size: 0.8rem;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <div v-if="loader" class="loading" id="loader">Loading&#8230;</div>
            @include('_inc.nav.topNav')
            <main class="m-t-0">
                @yield('content')
            </main>
        </div>
    <footer class="bg-primary">
    <div class="float-left logo" style="margin-left: 15px;">
        WeBroker - RC v2.0.0
    </div>
    <div class="float-right">
        <span>Siga-nos:</span>
        <a href="#!" target="_blank">
            F
        </a>
        <a href="#!" target="_blank">
            T
        </a>
        <a href="#!" target="_blank">
            J
        </a>
        <a href="#!" target="_blank">
            Y
        </a>
    </div>
</footer>
        <!-- Scripts -->
        <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
        <!-- Vite Scripts -->
        @if(app()->environment() === 'local')
            <!-- Vite Styles -->
            @vite( 'resources/js/app.js' )
        @else
            <script src="{{ asset('js/app.js') }}"></script>
        @endif
        <script src="{{ asset('js/main.js') }}"></script>
        @yield('scripts')
    </body>
</html>

And finally, the error shown in browser's inspector window:

[Vue warn]: Failed to mount app: mount target selector "\#app" returned null.

The template extends a layout file, defined with the @extends directive. It then defines two sections, @section('content') and @section('scripts'), which are included in the layout file.

The @section('content') section contains the HTML structure of the page and has a header with a title and a button. The button is only displayed if the user has the Administrator role as defined by the Laratrust package. The page has a two-column layout, with the right column showing a component named atendimentos using the Vue component syntax, <atendimentos :atendimentos="atendimentos"></atendimentos>. The component is defined in a script in the @section('scripts') section.

The script creates a new Vue instance, with the el property specifying the element in the HTML where the Vue component will be mounted. It defines data properties, methods, and a computed property for the Vue instance, which is passed to the component.

The app.js file imports two Vue components, Atendimentos and UploadForm, and creates a Vue app, defining the imported components in the app's component registry. The Vue app is mounted to the HTML element with the id of #app.

The app.blade.php file is the HTML template file for the app, with the content of the <bitlife> section including meta data, such as a title, character encoding, and a CSRF token. The file also includes stylesheet and script files, either from the local environment or from an asset folder, depending on the environment.

Moderators