Vuejs modal not exiting

Question

I'm new to vuejs and am trying to create a basic modal for the first time. I have successfully created the modal, but I am struggling with figuring out why I cannot exit or enter the modal successfully. Thoughts?

Here's the Modal.vue file (I currently have no styling yet, I am just trying to get the functionality first):

<template lang="pug">
.TracesTableModal
 transition(name='modal')
    .modal-mask(v-if='show')
      .modal-wrapper
        .modal-container
          .modal-header
            slot(name='header') default header
          .modal-body
            slot(name='body') default body
          .modal-footer
            slot(name='footer') default footer
              button.modal-default-button(@onClick='changeShow') OK

</template>
<script setup lang="ts">
  let show = true;
  const changeShow = () => {
    show = !show;
    console.log("show is " + show);
  }
</script>

here's the vue file I am putting it into:

<template lang="pug">
.Page
  SideBar
  .Page__layout
    NavBar
    .Page__modal
      button#show-modal(@click='showModal = true') Show Modal
      teleport(to='body')
        modal(:show='showModal' @close='showModal = false')
</template>

I don't have any scripts or styling for the second page yet either.