title: VueJS reactivity does not work inside blade section
body: <p>I've just been experimenting with vuejs, trying to get it to work on a laravel project on mine.</p>
  
  <p>The problem is that the reactivity works fine if my element is in the layout blade template, but not in the section. Im trying to modify the properties from the console to see them change in the DOM.</p>
  
  <p>I have a view called blog.blade.php, which extends the layout app.blade.php</p>
  
  <p>The code in app.blade.php</p>
  
  <pre><code>    &lt;div id='test'&gt;
          @{{ test }}
      &lt;/div&gt;
      &lt;script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"&gt;&lt;/script&gt;
      &lt;script&gt;
      var app2 = new Vue({
          el : "#test",
          data : {
              test : "Hello World"
          }
      });
  
      var app3 = new Vue({
          el : "#root",
          data : {
              tester : "Hello Vue!"
          }
      });
  
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here's the code in my blog.blade.php view</p>
  
  <pre><code>   &lt;div class='card'&gt;
          &lt;div class='card-header'&gt;Post a comment&lt;/div&gt;
          &lt;div class='card-body'&gt;
             &lt;div id='root'&gt; @{{ tester }} &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>In the element root, the value of tester property shows up, but it cannot be modified, but this works in the test element thats at the end of app.blade.php layout file.</p>
  
  <p>Im really lost and have no idea whats going on here.
  If anyone can shed some light on this, that'd be great.</p>
  
  <p><a href="https://pastebin.com/GkNqFUzy" rel="nofollow noreferrer">https://pastebin.com/GkNqFUzy</a></p>