How do I get a reference to currently opened modal so I can dismiss it? (Ionic Vue)

Hi, I am using the ion-modal component for the first time. I have an IonBadge that is used to open the modal. I’m not sure how to grab the currently opened modal and close it. Here is the ShowInviteModal:

<template>
  <ion-page>
    <ion-content class="ion-padding">
      <ion-badge @click="openModal"></ion-badge>
    </ion-content>
  </ion-page>
</template>

<script>
import { IonBadge, IonContent, IonPage, modalController } from '@ionic/vue';
import Modal from './Modal.vue';

export default {
  components: { IonBadge, IonContent, IonPage },
  props: {invites: []},
  methods: {
    async openModal() {
      const modal = await modalController
        .create({
          component: Modal,
          componentProps: {
            title: 'New Title'
          },
        })
      return modal.present();
    },
  },
}
</script>
<style>
ion-badge {
  background: #FC0007;
  width: 4vh; 
  height: 4vh;
  border-radius: 50%;
  display: flex; /* or inline-flex */
  align-items: center; 
  justify-content: center;
  margin-right: 0vw;
}
</style>

And the actual Modal that is being opened looks like this:

<template>
          <ion-header translucent>
            <ion-toolbar>
              <ion-title>Modal Content</ion-title>
              <ion-buttons slot="end">
                <ion-button onclick="dismissModal()">Close</ion-button>
              </ion-buttons>
            </ion-toolbar>
          </ion-header>
          <ion-content fullscreen>
            <ion-list>
              <ion-item>
                <ion-avatar slot="start">
                  <ion-img src="./avatar-gollum.jpg"/>
                </ion-avatar>
                <ion-label>
                  <h2>Gollum</h2>
                  <p>Sneaky little hobbitses!</p>
                </ion-label>
              </ion-item>
              <ion-item>
                <ion-avatar slot="start">
                  <ion-img src="./avatar-frodo.jpg"/>
                </ion-avatar>
                <ion-label>
                  <h2>Frodo</h2>
                  <p>Go back, Sam! I'm going to Mordor alone!</p>
                </ion-label>
              </ion-item>
              <ion-item>
                <ion-avatar slot="start">
                  <ion-img src="./avatar-samwise.jpg"/>
                </ion-avatar>
                <ion-label>
                  <h2>Samwise</h2>
                  <p>What we need is a few good taters.</p>
                </ion-label>
              </ion-item>
            </ion-list>
          </ion-content>
</template>

<script>
import { IonContent, IonHeader, IonTitle, IonToolbar} from '@ionic/vue';
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'Modal',
  props: {
    title: { type: String, default: 'Super Modal' },
  },
  data() {
    return {
    }
  },
  components: { IonContent, IonHeader, IonTitle, IonToolbar }
});
</script>

What I am trying to accomplish is grab a reference to the Modal I just opened so I can call dismiss() on it, but I am not sure how to accomplish this. In the Github example it all happens on the same page, so they have both open and close the modal on the same page, which means they have a reference to the modal, which I don’t. Do I pass it down as a prop, or what is the way of doing this? Thank you for your help.