Need help in converting Jquery Ajax Modal to Alpine JS

Question

I am attempting to convert a Bootstrap Jquery Modal with an ajax request into a Tailwind Css Alpine JS modal with Ajax request.

Jquery Code

$(document).on('click', 'a[data-ajax-popup="true"], button[data-ajax-popup="true"], div[data-ajax-popup="true"]', function () {
    var title = $(this).data('title');
    var size = ($(this).data('size') == '') ? 'md' : $(this).data('size');
    var url = $(this).data('url');
    $("#commonModal .modal-title").html(title);
    $("#commonModal .modal-dialog").addClass('modal-' + size);
    $.ajax({
        url: url,
        success: function (data) {
            $('#commonModal .modal-body').html(data);
            $("#commonModal").modal('show');
            daterange_set();
            taskCheckbox();
            common_bind("#commonModal");
              commonLoader();
        },
        error: function (data) {
            data = data.responseJSON;
            show_toastr('Error', data.error, 'error')
        }
    });

});

The Jquery Modal Template located in the layouts.app

<div class="modal fade" id="commonModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div>
                <h4 class="h4 font-weight-400 float-left modal-title" id="exampleModalLabel"></h4>
                <a href="#" class="more-text widget-text float-right close-icon" data-dismiss="modal" aria-label="Close">{{__('Close')}}</a>
            </div>
            <div class="modal-body">
            </div>
        </div>
    </div>
</div>

The code to call the modal from a different blade view i.e. names.index.blade.php

<div class="col-xl-2 col-lg-2 col-md-4 col-sm-6 col-6">
    <a href="#" data-url="{{ route('names.create') }}"
        data-ajax-popup="true"
        data-title="{{__('Create Name')}}"
        class="btn btn-xs btn-white btn-icon-only width-auto">
        <i class="fas fa-plus"></i> {{__('Create')}}
    </a>
</div>

This is doing an ajax call to the NamesController which contains the code

public function create()
    {
        if(Auth::user()->can('create name'))
        {
            return view('names.create');
        }
        else
        {
            return response()->json(['error' => __('Permission Denied.')], 401);
        }
    }

I have been able to code the AlpineJs modal. However unable to wrap my head around calling the ajax functionality.

The modal code with Alpine and Tailwind

<div x-data="{ 'showModal': false }" x-cloak @keydown.escape="showModal = false">
    <!-- Trigger for Modal -->
    <button type="button" @click="showModal = true">Open Modal</button>

    <div x-show="showModal" class="fixed inset-0 z-30 flex items-center justify-center overflow-auto bg-black bg-opacity-50">
        <!-- begin::Modal content -->
        <div class="sm:h-[calc(100%-5rem)] max-w-4xl my-6 mx-auto relative w-auto pointer-events-none">
            <div @click.away="showModal = false"
                x-transition:enter="motion-safe:ease-out duration-300"
                x-transition:enter-start="opacity-0 scale-90"
                x-transition:enter-end="opacity-100 scale-100"
                class="max-h-full  overflow-hidden relative flex flex-col w-full pointer-events-auto
                    bg-white bg-clip-padding rounded-md
                    border-none shadow-lg">

                <!-- begin::Modal Header -->
                <div class="flex flex-shrink-0 items-center justify-between p-4
                        bg-blue-200
                        border-b border-gray-200 rounded-t-md">
                    <h3 class="font-semibold text-base sm:text-xl
                            text-gray-50">
                        Modal title
                    </h3>
                    <button type="button"
                        @click="showModal = false"
                        class="text-gray-200 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-toggle="default-modal">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
                        </svg>
                </button>
                </div>
                <!-- end::Modal Header -->

                <!-- begin::Modal Body -->
                <div class="flex-auto overflow-y-auto relative p-4
                        dark:bg-modal-body-dark">
                    <p>This is some placeholder content.</p>
                </div>
                <!-- end::Modal Body -->

                <!-- begin::Modal Footer -->
                <div
                    class="flex flex-shrink-0 flex-wrap space-x-2 items-center justify-end p-4
                        bg-gray-200
                        border-t border-gray-200 rounded-b-md">
                    <button data-modal-toggle="default-modal" type="button"
                        class="text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:ring-gray-300 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600">
                        Cancel
                    </button>
                    <button data-modal-toggle="default-modal" type="button"
                            class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
                        I accept
                    </button>
                </div>
                <!-- end::Modal Footer -->
            </div>
        </div>
        <!-- end::Modal content -->
    </div>
</div>

How do I get the same Jquery functionality with the AlpineJs modal template located in the layouts.app and doing an ajax call from names.index.blade.php