Vue JS Components - It doesn't work when I press the button with @click for the second time

I am using Vue JS to create modal in Laravel
when i press the button with @click the first time it works but the next time i get an error.

Laravel Blade :

<div class="col-span-12 mb-5" id="app">
    <div class="text-end text-base">
        <button type="button" class="text-primary hover:text-secondary" @click="showModal = true">Verify your email
        </button>
    </div>
    <v-modal :open="showModal">
        <form action="" method="post" id="form_verify_email">
            @csrf
            <input type="hidden" name="email" value="{{ auth()->user()->email }}">
            <div class="">
                <x-user.form.buttons.primary>
                    {{ __('Verify Email') }}
                </x-user.form.buttons.primary>
            </div>
        </form>
    </v-modal>
    <x-user.form.inputs name="email" placeholder="Email" type="email" :value="old('email', auth()->user()->email)"/>
</div>

JS :

import { createApp } from 'vue'

import modal from './components/modal.vue'

// Vue app
const app = createApp({
    data() {
        return {
            showModal: false,
        }
    },
})


app.component('v-modal', modal)

app.mount('#app')

Vue:

<script setup>
import { ref, defineProps,  onMounted } from 'vue'
import { Dialog, DialogPanel, DialogTitle, TransitionChild, TransitionRoot } from '@headlessui/vue'

let { open } = defineProps({
    open: {
        type: Boolean,
        required: true,
    },
})
</script>

the template I use in tailwindcss : code first

can you see where i am going wrong ?

When you close the dialog, showModal stays true, so the clicking doesn't change it and nothing happens the second time. You should set it to false on the close v-modal event:

Your v-modal:

<Dialog :open="open" @close="$emit('close')">

https://headlessui.com/vue/dialog

And your parent component:

<div class="col-span-12 mb-5" id="app">
    <div class="text-end text-base">
        <button type="button" class="text-primary hover:text-secondary" @click="showModal = true">Verify your email
        </button>
    </div>
    <v-modal :open="showModal" @close="showModal = false">
        <form action="" method="post" id="form_verify_email">
            @csrf
            <input type="hidden" name="email" value="{{ auth()->user()->email }}">
            <div class="">
                <x-user.form.buttons.primary>
                    {{ __('Verify Email') }}
                </x-user.form.buttons.primary>
            </div>
        </form>
    </v-modal>
    <x-user.form.inputs name="email" placeholder="Email" type="email" :value="old('email', auth()->user()->email)"/>
</div>

Try this:

@click="showModal = !showModal"