[FIXED] Why Vue 3 render components without methods and data on Laravel 5.8

Issue

On Laravel 5.8, I need to translate a project from Vue 2 to 3.

I adjusted the assembly to the stage that it stopped giving errors, and the components began to be displayed. But! They are empty. No methods or internal properties. But external props works. No errors in terminal and console. Why? How to solve it?

app.js :

require('./bootstrap');
/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */
import {createApp} from 'vue';

let app = createApp({})


import PrivateOffice from "./PrivateOffice";
app.component('private-office', PrivateOffice);

app.mount("#app");

privateOffice.vue :

<template>
    <div @click="consoleShow" class="myBtn">
        Hello
    </div>
</template>

<script>
    export default {
        name: "PrivateOffice",
        data() {
            return {
                click: 0
            }
        },
        methods: {
            consoleShow() {
                this.click++;
                console.log(this.click)
            }
        }
    };
</script>

<style lang="scss">
    .myBtn {
        padding: 12px;
        background-color: #cdcdcd;
        user-select: none;
        cursor: pointer;

        &:hover {
            background-color: #8A8A8A;
            color: white;
        }
    }
</style>

webpack-mix:

const mix = require('laravel-mix');
const webpack = require('webpack');
const path = require('path');

const dotenv = require('dotenv')
/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */


mix.override((config) => {
    delete config.watchOptions;
});

mix.webpackConfig({
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: [
                    {
                        loader: "sass-loader",
                        options: {
                            prependData: `@import "public/scss/abstract.scss";`,
                        },
                    }
                ]
            }
        ]
    },
    plugins: [
        new webpack.DefinePlugin({
            __VUE_OPTIONS_API__: false,
            __VUE_PROD_DEVTOOLS__: false,
        }),
        new webpack.DefinePlugin({
            'process.env': JSON.stringify(dotenv.config().parsed) // it will automatically pick up key values from .env file
        })
    ],
});


mix.alias({
    '@': path.resolve('resources/js'),
    "@model": path.resolve("resources/js/models"),
    "@component": path.resolve("resources/js/components"),
    "@style": path.resolve("resources/js/assets/scss")
})

mix.js('resources/js/app.js', 'public/js')
    .vue()
    .sass('resources/js/public/scss/style.scss', 'public/css'); 

Rendered component: http://prntscr.com/1zrqkhd

On the click of a button, nothing happens.

Solution

1. We wrote the npm u command and now it works. It looks like there was a version conflict, or some packages were missing.

2. Also a similar issue occurs if more than one app.js is included on the page.

Ahah, googled my own answer :D

Answered By - ATLANT