Nuxt3/vue3 how to show modal component that is called from header component?

I am using nuxt3/vue3. I am having a difficult time to call the modal based on my header component. I just put the modal inside the header component and use Teleport function to teleport the modal in the body based on the showModal value but it doesnt work. Here is what I tried

Header.vue

<template>
    <header class="header sticky-top">
        <nav class="container-fluid navbar-light bg-light">
                <div class="row justify-content-start">
                    <div class="col text-end p-3">
                        <button @click="showModal = true" type="button" class="btn">Register</button>
                    </div>
                </div>
                <Modal v-show="showModal"/>
        </nav>
    </header>
</template>

<script lang="ts">
import Modal from '~~/components/Modal.vue';

export default {
    components:{
        Modal
    },
    data(){
        return{
            showModal: false
        }
    },
}
</script>

DefaultLayout.vue

<template>
        <Header />
            <main class="p-4 ">
                <div class="container-fluid ">
                    <slot />
                </div>
            </main>
        <Footer />
</template>

<script lang="ts">
import Header from '~~/components/Header.vue';
import Footer from '~~/components/Footer.vue';
export default {
    components: {
        Footer,
        Header
    },
}
</script>

index.vue (which is my homepage)

<template>
    <default-layout>
        <Listings/>
    </default-layout>
</template>

<script lang="ts">
import DefaultLayout from '~~/layouts/DefaultLayout.vue';
import Listings from '~~/components/Listings.vue';
export default {
    setup() {

    },
    components: {
        DefaultLayout,
        Listings
    }
}
</script>

Modal.vue

<template>
    <Teleport to="body">
        <div class="modal show" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        ...
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary">Save changes</button>
                    </div>
                </div>
            </div>
        </div>
    </Teleport>
</template>

<script lang="ts">
export default{
    props:{
        showModal: Boolean
    }
}
</script>

My current approach to modals is to mount the modal component into global app template and controll its visibility by a Pinia store variable:

• example - app.vue
• example - store
• example - modal

I use Composition API, but hopefully you'll get the idea.

based on the response of @ellrohir, I have developed a simple method for Nuxt 3 with Pinia and Primevue

my store file modalStore.ts

export const useModalStore = defineStore({
	id: 'modal-store',
	state: () => {
		return {
			displayModal: false,
			modalTitle: '',
			modalText: '',
		};
	},
	actions: {
		showModal(title: string, text: string): void {
			this.modalTitle = title;
			this.modalText = text;
			this.displayModal = true;
		},
		closeModal(): void {
			this.displayModal = false;
		},
	},
});

my app.vue

<script setup>
	const modalStore = useModalStore();
</script>
<template>
	<DialogLogin />
</template>

my modal DialogLogin

<script setup>
	const modalStore = useModalStore();
</script>

<template>
	<Dialog
		:header="$t('login')"
		v-model:visible="modalStore.displayModal"
		:breakpoints="{ '960px': '75vw', '640px': '90vw' }"
		:style="{ width: '50vw' }"
		:position="position"
		:modal="true"
	>
		<!-- login component form -->
		<FormLogin />

		<!-- footer template -->
		<template #footer>
			<Button
				:label="$t('cancel')"
				icon="pi pi-times"
				@click="modalStore.closeModal()"
				class="p-button-text"
			/>
		</template>
	</Dialog>
</template>

then I activate it with a button

		<Button
			label="Login"
			icon="pi pi-sign-in"
			@click="modalStore.showModal()"
		></Button>