Integrate Laraval with Vue js - laravel

Question

I present to you my problem. I am working on a project in Laravel and I initially integrated Vue js as a script within a blade view like this, importing Vue with CDN.
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.12"></script>
var app = new Vue({
el: '#app',
data: {
search: '',
//other data .........
},
})
All the logic (methods and data) are inside the blade view script and I don't use components for now. In the development of the project I had the need to add a component (Tiny mce - wysiwyg). For this I had to use Laravel Mix, in order to load the component into the view.
require('./bootstrap');
window.Vue = require('vue').default;
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
Vue.component('tinymce', require('./components/Tinymce.vue').default);
const app = new Vue({
el: '#app',
});
First question
The first question I ask myself is: the two instances of Vue, the one inside the source file /resources/js/app.js and the one inside the blade view must have hook to the same HTML element, and therefore have the same ID?
el: '#app',
I cannot move the Vue instance from the blade file into the app / js file because it intertwines with php code. I must necessarily remain two different instances. One is used to load the component, in this case Tiny Mce and the other to run the script within the Laravel blade view. How do these two instances behave and interact?
Second question
Also the second question I ask myself is: do I need to cdn the Vue into the page, including the script
<script src="{{ asset('js/app.js') }}" defer ></script>
Importing Vue inside the app.js file, I am unable to remove the Vie via CDN in the views

Answer 1

the two instances of Vue must have hook to the same HTML element, and therefore have the same ID?
No, on the contrary I don't thinks it's a great idea to assign two different instances to the same element. You could have some weird behaviour in case the two instances start interfering with each other. Use two separate HTML roots for the instances
do I need to cdn the Vue into the page, including the script
No. If in your compiled js you assign the Vue instance to the window object, you don't need the CDN anymore. Just be careful: your compiled js file must be included before your script tag with the blade vue instance, without defer or async.
<script src="{{ mix('js/yourfile.js') }}"></script>
// ^^^ this one before and without defer
// no vue included through CDN
<script>
var app = new Vue({
....
})
</script>
Now, let's address the elephant in the room. Having a whole vue instance in a blade file is a bad practice, in may work up to a certain point but, as you noticed in this case, it becomes a problem.
I cannot move the Vue instance from the blade file into the app / js file because it intertwines with php code.
The only way I can imagine PHP and JS code interacting with each other is in order to pass some data from PHP to JS. In case that's the problem, here is an idea on how to do it:
In your blade file, you attach the data structure you want to share with Js to the window object:
<script>
window.sharedData = {
key: #if($cond) 'value1' #else 'value2'
...
}
</script>
If you have a PHP object that you want to share directly, you can use the #json directive:
<script>
window.sharedData = #json($sharedData);
</script>
Now, AFTER this script tag you can include the mix file:
<script src="{{ mix('js/yourfile.js') }}"></script>
There, you can use the window.sharedData object with the data build using PHP code:
var app = new Vue({
data: window.sharedData
})