Appending multiple Vue2 components from ajax html response not working

I’m trying to append multiple vuejs components with jquery ajax, but it’s not working. It all works fine, until response returns more than one component, or component within component.

Here’s the code:

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

<div id="app">
</div>

<script type="text/x-template" id="template-1">
    <div>
     <h1>Template 1 {{param}}</h1>
    </div>
</script>

<script type="text/x-template" id="template-2">
    <div>
     <h1>Template 2 {{param}}</h1>
    </div>
</script>


<script>
    Vue.component('template-1', {
         template: '#template-1',
         props: ['param']
       });

       Vue.component('template-2', {
         template: '#template-2',
         props: ['param']
       });

       const vm = new Vue({
           el: '#app'
       });
</script>

<script>

    function loadMore(){
        $.get('/home/test', function (response) {
            var MyComponent = Vue.extend({
                template: response
            });

          
            var compiled = new MyComponent().$mount();
            $('#app').append(compiled.$el);
        });
    }

   loadMore();

</script>

If the following response comes from ajax, it works, and renders one component:

<template-1 param="Test"></template-1>

If the following response returns from ajax, it renders only first component:

<template-1 param="Test"></template-1>
<template-2 param="Test"></template-2>

If the following response returns from ajax, it renders both components:

<div>
    <template-1 param="Test"></template-1>
    <template-2 param="Test"></template-2>
</div>

If the following response returns from ajax, it renders only parent component:

<template-1 param="Test">
    <template-2 param="Test"></template-2>
</template-1>

Is there a way to make this work always, without knowing how many components will be returned from the server?

Answer

Since you are telling Vue that your response.data should be the value of the el property, it will look inside it and render all components that were registered and therefore known.

In your case you should always wrap your response inside another HTML element, which then should be the value of the el property.

Notice: Vue elements inside other Vue elements can only be rendered, if the parent component (here your template-1) has registered the second one itself. Means when template-1 got rendered, everything inside it will be removed, except it is using slots.

If you want to use slots, this could help you.

Otherwise you could use the render function and build your own dynamic render stuff.