modal not closing with event vue 3

I have a modal I am trying to close via button. The modal renders as expected and in the parent the console.log(”); does render but does not close

modal

Parent

<script setup lang="ts">
    
const showLoginModal = ref(false);
const closeModal = () => {
    showLoginModal.value = false;
    console.log("in the parent closeModal " + showLoginModal.value);
}


</script>
<template>
    <div v-if="showLoginModal">
        <LoginModal @close="closeModal"></LoginModal>
    </div>
</template>

In the child I have

<template>
    <div class="modal-overlay">
        <div class="modal-content">
            <button v-on:click="$emit('close', true)">Close</button>
        </div>
    </div>
</template>

My question is, why is my closeModal function unable to close the modal.

const showLoginModal = ref(false);

In the console logs I see the log, but it has no effect

const closeModal = () => {
    showLoginModal.value = false;
    console.log("in the closeModal " + showLoginModal.value);
}

I see the value is false, but it doesn’t have an effect on

    <div v-if="showLoginModal">
        <LoginModal @close="closeModal"></LoginModal>
    </div>

Which is declared in the parent.