title: Issues globally scaffolding vue in laravel
body: <p>I have a laravel 8 project and in there I have a <code>main.blade.php</code> file that has <code>@sections</code> and <code>@yield()</code>s content. I have installed vue v2.x and am having issues placing the parent id of the root vue component. I keep getting this error on some pages in my app but not all.</p>
  <pre><code>[Vue warn]: Error compiling template:
  
  tag &lt;section&gt; has no matching end tag.
    
  &lt;section class=&quot;content&quot;&gt;
  </code></pre>
  <p>I can read so of course I check if the section tag it is complaining about has a matching closing tag. It does:</p>
  <p>main.blade.php</p>
  <pre><code> &lt;div id=&quot;app&quot;&gt;
       &lt;section class=&quot;content&quot;&gt;
           @yield('content')
       &lt;/section&gt;  //matching closing section tag
   &lt;/div&gt;
  </code></pre>
  <p>resources/app.js</p>
  <pre><code>import Vue from &quot;vue&quot;;
  
  window.Vue = require('vue');
  
  Vue.component('spinner-button', require('./js/components/spinner-button.vue').default);
  
  const app = new Vue({
      el: '#app',
  });
  </code></pre>
  <p>A lot of other files using my main.blade.php file via <code>@extends('templates.main')</code></p>
  <p>My component works fine on some pages but on other pages I get the browser error stated above. Where should I place the main app id?</p>