[Vuejs]-Integrate Laraval with Vue js

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
  })