Button in Header.vue that opens a Modal

Question

The task is to create a Button, which opens a Modal. When I click the button, nothing opens. Can anyonee help? I have added the Button to the navbar of the header.vue component. I deleted the code for the navbar so its less complicated to read the code.

<template>
<nav class="navbar bg-light">
    

        <!-- TODO: button -->

        <button class="btn btn-info" id="buttonToggleModal" @click="openModal">Create new Task</button>
        <example-modal ref="modal"></example-modal>
    </div>
</nav>

Now I need to implement the Event handling in the Parent Component (App.vue). Again I deleted all unnecessary code like imports, and only left the needed code for the task.

<template>
<!-- TODO: add Modal component and event handling -->
<Header :title="title" :openModal="openModal"/>
<Board :columns="columns" />
<Modal :show="showModal" @closeModal="closeModal" />

<script setup> const showModal = ref(false); const methods = {
openModal() {
    // Setzen Sie den Zustand auf true, um das Modal zu öffnen
    showModal.value = true;
},
openEditModal(data){


// <handle with your data>
  this.$root.$emit("bv::show::modal", "exampleModal");
}


};

Why does nothing happen when I click the button?