Front on vue breaks when trying to update laravel-mix to version without vulnerability?

Question

JavaScript

I lived without problems with laravel-mix and the front on vue.js, GitHub recently announced that I have a vulnerability in Laravel-mix in my application, which is also indicated by npm.
npm audit fix couldn't do anything.
npm audit fix --force or manually updating laravel-mix ( npm install --save-dev [email protected] ) followed by npm run dev produces the following:

spoiler

npm run dev

> [email protected] dev /var/www/ws-chat
> NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

        Additional dependencies must be installed. This will only take a moment.
 
        Running: yarn add vue-template-compiler --dev --production=false
 
warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
        Okay, done. The following packages have been installed and saved to your package.json dependencies list:
 
        - vue-template-compiler
 
        Additional dependencies must be installed. This will only take a moment.
 
        Running: yarn add [email protected]* sass [email protected] --dev --production=false
 
warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
warning " > [email protected]" has unmet peer dependency "[email protected]^3.0.0 || ^4.0.0".
        Okay, done. The following packages have been installed and saved to your package.json dependencies list:
 
        - [email protected]*
 
        - sass
 
        - [email protected]
 
        Finished. Please run Mix again.

On the next call:

spoiler

npm run dev
> [email protected] dev /var/www/ws-chat
> NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js
98% after emitting SizeLimitsPlugin
DONE Compiled successfully in 14837ms 9:04:48 PM
Asset Size Chunks Chunk Names
/public/js/app.js 817 KiB /public/js/app [emitted] /public/js/app
public/css/app.css 172 KiB /public/js/app [emitted] /public/js/app

After that I see an error in the browser console:

<spoiler title="">[Vue warn]: Failed to mount component: template or render function not defined.

found in

---> <Chatbox>
       <Root></spoiler>

Chatbox is my component that worked correctly before the update.
After one more npm install
when trying to npm run dev we get:

Vue packages version mismatch:

- [email protected]
- [email protected]

Has anyone been able to fix this issue?

Answer 1

- [email protected]
- [email protected]

As far as I remember, their versions must match, write in packahe.json
vue: ~2.5.17
vue-template-compiler: ~2.5.17
or
vue: ~2.5.22
vue-template-compiler: ~2.5.22