title: There is no output for my Vue view after adding it to laravel
body: <p>I tried to connect my Vue Games.vue view but couldn't get my info from this template to the template blade in laravel, I don't understand what is the problem here.</p>
  <p><strong>Games.vue</strong></p>
  <p>As you can see I write the code here.</p>
  <pre><code>&lt;template&gt;
      &lt;h1&gt;New Vue View&lt;/h1&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
      mounted() {
          console.log('Component mounted.')
      }
  }
  &lt;/script&gt;
  
  </code></pre>
  <p><strong>games.blade.php</strong></p>
  <p>And I call the method  that is declared in the app.js file, it should show my info from Games.vue here</p>
  <pre><code>@extends('modal')
  @section('content')
      &lt;div class=&quot;container&quot;&gt;
          &lt;h1 class=&quot;text-center my-5&quot;&gt;Llista de jocs&lt;/h1&gt;
          &lt;table class=&quot;table table-dark table-bordered&quot;&gt;
              &lt;th&gt;Número&lt;/th&gt;
              &lt;th&gt;Nom&lt;/th&gt;
              &lt;th&gt;Organització&lt;/th&gt;
              @auth
                  @if(Auth::user()-&gt;isAdmin())
                      &lt;th&gt;Opcions
                          &lt;a class=&quot;btn btn-success float-lg-end&quot; href=&quot;/games/create&quot;&gt;Crear Joc&lt;/a&gt;
                      &lt;/th&gt;
                  @endif
              @endauth
              @foreach($games as $game)
                  &lt;tr&gt;
                      &lt;td&gt;{{$game-&gt;id}}&lt;/td&gt;
                      &lt;td&gt;{{$game-&gt;name}}&lt;/td&gt;
                      &lt;td&gt;{{$game-&gt;organization}}&lt;/td&gt;
                      @auth
                          @if(Auth::user()-&gt;isAdmin())
                              &lt;td&gt;
                                  &lt;a class=&quot;btn btn-primary&quot; href=&quot;/games/edit/{{$game-&gt;id}}&quot;&gt;Edita&lt;/a&gt;
                                  &lt;a class=&quot;btn btn-danger&quot; href=&quot;/games/delete/{{$game-&gt;id}}&quot;&gt;Elimina&lt;/a&gt;
                              &lt;/td&gt;
                          @endif
                      @endauth
                  &lt;/tr&gt;
              @endforeach
          &lt;/table&gt;
      &lt;/div&gt;
      &lt;div id=&quot;app&quot; class=&quot;content&quot;&gt;
          &lt;games-component&gt;&lt;/games-component&gt;
      &lt;/div&gt;
      &lt;script src=&quot;{{mix('js/app.js')}}&quot;&gt;&lt;/script&gt;
  
  @endsection
  </code></pre>
  <p><strong>app.js</strong></p>
  <pre><code>require('./bootstrap');
  
  window.Vue = require('vue');
  
  Vue.component('games-component', require('./components/games/Games.vue'));
  
  const app = new Vue({
      el: '#app'
  });
  </code></pre>
  <p>My output: <a href="https://i.stack.imgur.com/1ctw3.png" rel="nofollow noreferrer">https://i.stack.imgur.com/1ctw3.png</a></p>