Vue 3 event/listener not communicating properly

Question

I'm building a vue application (with naive-ui) to log my sports bets. I've created a component that has a grid of my bets and I'm trying to create a modal that will allow me to create new bets. The modal will open correctly the first time. But when I try open it a second time, it won't open. This is because 'showBetModal' is still set to true in the parent component. Why isn't the event triggering? I've removed the contents of the data-table to keep the snippet manageable.

Bets.vue

<template>
  <div>
    <n-card title="Bets" header id="bets-table-card">
      <template #header-extra>
        <n-icon class="pointer" @click="showBetModal = true">
          <add-circle-outline></add-circle-outline>
        </n-icon>
      </template>
    <bet-modal :showModal="showBetModal"  @closeBetModal="closeBetModal()"/>
  </n-card>
</div>

</template>

<script lang="ts">
import { defineComponent, h, onMounted, ref, reactive } from "vue";
import {
  DataTableColumns,
  NDataTable,
  NSelect,
  PaginationInfo,
  NCard,
  NIcon,
} from "naive-ui";
import { RowData } from "naive-ui/es/data-table/src/interface";
import CurrencyFormatter from "@/components/formatters/CurrencyFormatter.vue";
import PercentageFormatter from "@/components/formatters/PercentageFormatter.vue";
import { useAuth0 } from "@auth0/auth0-vue";
import axios from "axios";
import Bet from "@/models/Bet";
import { AddCircleOutline } from "@vicons/ionicons5";
import BetModal from "@/components/modals/bet-modal.vue";

var data = ref([] as Bet[]);
var loading = ref(false);

export default defineComponent({
name: "Bets",
components: {
NDataTable,
NCard,
AddCircleOutline,
NIcon,
BetModal
},
setup() {
const dataRef = ref([] as Bet[]);
});

const showBetModal = ref(false);
return {
  showBetModal: showBetModal,
  closeBetModal: () => {
    showBetModal.value = false;
  },
    };
  },
});
</script>

And I have the modal component right now that I'm passing a prop to control whether the modal is open or closed. I've tried using it with setup(props, {emit}), inline with this.$emit, and in a function with this.$emit.

bet-modal.vue

<template>
   <n-modal :show="show" @close="closeBetModal()">
        <n-card title="Add Bets">
        
            <template #footer>
                <n-button @click="show = false">Cancel</n-button>
                <n-button @click="show = false">Add</n-button>
            </template>
        </n-card>
    </n-modal>
</template>

<script>
import { defineComponent, ref } from "vue";
import { NModal, NButton, NCard } from "naive-ui";
export default defineComponent({
    name: "BetModal",
    components: {
        NModal,
        NButton,
        NCard
    },
    props: {
        showModal: {
            type: Boolean,
            required: true
        },
    },
    emits: ["closeBetModal"],
    setup(props, { emit }) {

        const show = ref(props.showModal);
        const closeBetModal = () => {
            emit("closeBetModal");
        };
        return {
            show: show,
            closeBetModal
        }
    },
    watch: {
        showModal: function(newValue){
           this.show = newValue;
        }
    }

})
</script>

I can't see the event triggering in the vue-devtools either.