AlpineJS passing x-data to javascript to close modal using JavaScript

Hey everyone, I hope someone would help me. I am having hard time to pass the x-data to my javascript. I am using laravel blade on this and a livewire, my problem is i want to close the Editing User Modal after the sweetalert and i hardcoded this for an hours still won't get it, i even console.log the this.modal and it was equals to false yet, the modal won't still close. I hope someone can help me, Thanks!

  <!-- Modal for Editing User -->
    <template x-if="showModal">
        <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center">
        <div class="bg-white p-6 rounded shadow-lg w-1/3">
            <h2 class="text-xl font-bold mb-4">Edit User</h2>
            <form wire:submit.prevent="submitUpdatedForm">
            @csrf
                
            <input wire:model="id" x-model="id" type="hidden" class="w-full border p-2 rounded">

            <div class="mb-4">
                <label class="block text-gray-700">Name:</label>
                <input wire:model="name" x-model="name" type="text" class="w-full border p-2 rounded">
            </div>

            <div class="mb-4">
                <label class="block text-gray-700">Email:</label>
                <input wire:model="email" x-model="email" type="text" class="w-full border p-2 rounded">
            </div>
                
            <div class="mb-4">
                <label class="block text-gray-700">Role:</label>
                <select wire:model="role" x-model="role" class="w-full border p-2 rounded">
                @foreach ($enumValues as $role)
                    <option value="{{ $role }}">{{ ucfirst($role) }}</option>
                @endforeach
                </select>
            </div>
            
            <div class="mb-4" x-show="role === 'Registrar'">
                <label class="block text-gray-700">Window Number:</label>
                <select model:role="window_no" x-model="window_no" class="w-full border p-2 rounded">
                <option value="" disabled selected>Select Window Number</option>
                @foreach ($windows as $window)
                    <option value="{{ $window }}">{{ $window  }}</option>
                @endforeach
                </select>
            </div>

            <div class="flex justify-end">
                <button type="button" @click="showModal = false" class="px-4 py-2 bg-gray-500 text-white rounded mr-2">Cancel</button>
                <button type="submit" class="px-4 py-2 bg-blue-500 text-white rounded">Save Changes</button>
            </div>
            </form>
        </div>
        </div>
    </template>
</div>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
    let modalData;
    
    const alpineData = () => {
        return { 
                showModal: false,
                id: '',
                name: '',
                email: '',
                role: '',
                window_no: '',

                    openModal(id, name, email, role, window_no) {
                        this.id = id;
                        this.name = name;
                        this.email = email;
                        this.role = role;
                        this.window_no = window_no;
                        //
                        @this.set('id', id);
                        @this.set('name', name);
                        @this.set('email', email);
                        @this.set('role', role);
                        @this.set('window_no', window_no);
                        this.showModal = true;
                    },
                    closeModal(){
                        console.log('Closing modal');
                        this.showModal = false;
                        return this.showModal;
                    },
                }
        }
</script>

<script>
    const alpineInstance = alpineData();

    window.addEventListener('updateUser', (event) => {
    let data = event.detail

    Swal.fire({
                icon: 'success',
                title: 'User updated successfully!',
                showConfirmButton: false,
                timer: 1500
            }).then(() => {    
                alpineInstance.closeModal()   
            })

    });
</script>