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?