Vue 3 self-closing modal

AppModal.vue

<template>
  <button class="activator" @click="onButtonClick()">
    {{ buttonText }}
  </button>
  <transition name="slide-fade">
    <div class="modal" :class="{ show }" :key="show" v-if="show">
      <div class="exit-button" @click="onCloseModal()">
        X
      </div>
      <div class="content">
        <slot :onCloseModal="onCloseModal">
          ~ 
        </slot>
      </div>
    </div>
  </transition>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";

export default defineComponent({
  name: "AppModal",
  props: {
    buttonText: {
      type: String,
      required: true,
    },
  },
  setup() {
    const show = ref<boolean>(false);
    const onButtonClick = () => {
      show.value = true;
    };

    const onCloseModal = () => {
      show.value = false;
    };
    return {
      show,
      onButtonClick,
      onCloseModal,
    };
  },
});
</script>

<style scoped lang="scss">
@import "@/styles/main";

$width: 90vw;
$height: 70vh;

$button-size: 2rem;

button.activator {
  @include app-button;
}
.modal {
  visibility: hidden;
  &.show {
    visibility: unset;
  }
  @include app-card-dark;
  @include grid-center;
  opacity: 0.94;
  position: absolute;
  width: $width;
  height: $height;
  top: 0;
  left: (100vw - $width) * 0.25;
  grid-template-rows: $button-size 1fr;

  .exit-button {
    @include app-gradient;
    @include menu-choice-button;
    width: $button-size;
    height: $button-size;
    justify-self: start;
    font-size: $button-size * 0.7;
    transform: translate3d(-1px, -1px, 0);
  }

  .content {
    @include grid-center;
  }
}
</style>