title: I can't load vue dynamic component from ajax results
body: <p>I am learning vue with a symfony project and I have a problem.</p>
  <p>I'm trying to load a dynamic component with results from an ajax call for scrolling pagination, but can't get it to work.</p>
  <p>This is my code:</p>
  <p>Gamecard.vue</p>
  <pre><code>&lt;script&gt;
    export default {
      name: 'gamecard',
      props: ['name', 'description', 'tourneyscount'],
      data() {
        return {
  
        }
      }
    }
  &lt;/script&gt;
  </code></pre>
  <p>game-card.js</p>
  <pre><code>import Vue from 'vue';
  import Gamecard from './../../components/Gamecard'
  
  new Vue({
      el: '#game-card',
      components: {
          Gamecard,
          'gamecard': () =&gt; import('./../../components/Gamecard')
      }
  })
  </code></pre>
  <p>in this case, Gamecard is for initial components and 'gamecard': () ... is for dynamic components</p>
  <p>game-cards-container.html.twig  this have a loop for charge cards</p>
  <pre><code>{% for game in games %}
      {% include 'partials/cards/game-card.html.twig' %}
  {% endfor %}
  </code></pre>
  <p>game-card.html.twig</p>
  <pre><code>&lt;gamecard
      name=&quot;{{ game.getName() }}&quot;
      description=&quot;{{ game.getDescription() }}&quot;
      tourneyscount=&quot;{{ (game.getTourneys() | length &gt; 0) ? game.getTourneys() | length : '0' }} {{ 'active tourneys' }}&quot;
  &gt;&lt;/gamecard&gt;
  </code></pre>
  <p>my controller responses</p>
  <pre><code> if ($request-&gt;isXMLHttpRequest()) {
              return new JsonResponse(
                  [
                      'code' =&gt; Response::HTTP_OK,
                      'cards' =&gt; $this-&gt;render('partials/containers/game-cards-container.html.twig', [
                          'async' =&gt; true,
                          'games' =&gt; $gameList
                      ])-&gt;getContent()
                  ]
              );
          }
  
          return $this-&gt;render('home/index.html.twig', [
              'games' =&gt; $gameList
          ]);
  </code></pre>
  <p>and the ajax call:</p>
  <pre><code>const url = window.location.hostname + '/' + page;
  
      fetch('?page=' + page, {
          headers: {
              &quot;X-Requested-With&quot;: &quot;XMLHttpRequest&quot;
          }
      })
          .then(response =&gt; response.json())
          .then(function (response) {
              if (response.code === 200) {
                  console.log(response.cards);
                  document.getElementById('game-card').innerHTML += response.cards
                  canLoad = true;
              } else {
                  canLoad = false;
              }
          });
  </code></pre>
  <p>anybody can help me?</p>
  <p>Thanks!</p>