[Dúvida] Como fazer uso de um componente Lavrável no AJAX

Olá eu tenho uma dúvida que já está me consumindo uns dias, eu criei uma Api no laravel, e em outro projeto estou criando o front-end, então eu criei alguns componentes e iniciei eles com uma array para testar.

                $data = [
                          [
                              'id'=>'10',
                              'checked'=>true,
                              'name'=> 'Alexandre Silva',
                              'collaborator'=> 'Motorista',
                              'star'=> 5,
                              'cover'=>'https://images....'
                              ], 
                  ]

@foreach($data as $item)
                <li id="$item['id']">
                    <!-- colaborator-rating component-->
                    <x-card.preform.colaborator-rating
                        :name="$item['name']"
                        :collaborator="$item['collaborator']"
                        :cover="$item['cover']"
                        :checked="$item['checked']">
                        <!-- prefabs.ratin component-->
                        <x-prefabs.rating :starNumber="$item['star']">
                            <a href="#"
                               class="text-xs px-1 font-medium text-primary-900 underline hover:no-underline dark:text-white">{{$item['star']}}</a>
                            <a href="#"
                               class="text-xs px-1 font-medium text-primary-900 underline hover:no-underline dark:text-white">+{{ $item['id']}}
                                Viagens </a>
                        </x-prefabs.rating>
                        <!-- prefabs.ratin component-->
                    </x-card.preform.colaborator-rating>
                    <!-- colaborator-rating component-->
                </li>
                @endforeach

Agora em um cenário real, eu criei uma rota e um controller para buscar os dados lá da Api e faço essa requisição por este Ajax:

function carregarTabela(url, httpMethod, dados) {
        $.ajax({
            url: url,
            method: httpMethod,
            data: dados,
            dataType: 'json',
            contentType: false,
            cache: false,
            processData: false,
            success: function (response) {
                response.data.forEach(
                    element => $('#minha-lista').append()
                );

            },
            error: function (response) {
            }
        });
    }

como eu posso instanciar o meu componente no elemento #minha-lista, essa seria uma boa abordagem ou tem uma outra forma de trazer esses dados sem refresh?

success: function (response) { response.data.forEach(function (element) { // Crie uma variável para armazenar o HTML do seu componente var componentHTML = ` <li id="${element.id}">  <x-card.preform.colaborator-rating :name="${element.name}" :collaborator="${element.collaborator}" :cover="${element.cover}" :checked="${element.checked}">  <x-prefabs.rating :starNumber="${element.star}"> <a href="#" class="text-xs px-1 font-medium text-primary-900 underline hover:no-underline dark:text-white">${element.star}</a> <a href="#" class="text-xs px-1 font-medium text-primary-900 underline hover:no-underline dark:text-white">+${element.id} Viagens </a> </x-prefabs.rating>  </x-card.preform.colaborator-rating>  </li> `; // Adicione o componente à lista usando o método append do jQuery $('#minha-lista').append(componentHTML); }); },