Multiple instances of VUEjs in laravel - laravel

Question

Good morning! How can I work with multiple instances of VUEjs in Laravel?
I want to work with the components in some parts of the project and in other occasions I want to instantiate VUE directly in the view and do the logic there but I have the problem that I can't work with both at the same time.
If I want to work with the components I must leave the "const app new Vue" of the app.js file. But if I leave this file like this it won't work in the views.
how can i do it? Thank you!
app.js
/**
* 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 VueSweetalert2 from 'vue-sweetalert2';
require('./bootstrap');
window.Vue = require('vue');
/**
* The following block of code may be used to automatically register your
* Vue components. It will recursively scan this directory for the Vue
* components and automatically register them with their "basename".
*
* Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
*/
// const files = require.context('./', true, /\.vue$/i)
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))
Vue.use(VueSweetalert2);
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
Vue.component('eliminar-registro', require('./components/EliminarRegistro.vue').default);
Vue.component('modal-encuestas', require('./components/ModalEncuestas.vue').default);
Vue.component('abrir-modal', require('./components/AbrirModal.vue').default);
Vue.component('ejemplo-prueba', require('./components/EjemploPrueba.vue').default);
/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
const app = new Vue({
el: '#app',
});

Answer 1

Notice how your vue instance mounts to an element
const app = new Vue({
el: '#app',
});
This can be found in your app.blade.php or whatever layout you use
there will be a <div id="app"></div>
This is how you mount instances.
So now If you want a second instance
You can mount a second one to another div as long as the two divs are seperate
in app.js
const app = new Vue({
el: '#app',
});
const app = new Vue({
el: '#second-app',
});
Then in your app.blade.php
<div id="app"></div>
<div id="second-app"></div>
This will give you two seperate vue instances on the same page.