ionic vue 3 ionslides in modal

App.vue

<template>
  <ion-page>
    <ion-header :translucent="true">
      <ion-toolbar>
        <ion-title>Blank</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content :fullscreen="true">
      <ion-button @click="setOpen(true)">SHOW MODAL</ion-button>
      {{ showModal }}
      <ion-modal
        :is-open="showModal"
        @didDismiss="setOpen(false)"
        @did-present="modalLoaded"
      >
        <ion-page>
          <ion-content>
            <ion-button @click="goto">GO TO</ion-button>
            <ion-slides ref="swiperRef" :options="options">
              <ion-slide>
                <ion-card>
                  <ion-card-content>Slide 1</ion-card-content>
                </ion-card>
              </ion-slide>
              <ion-slide>
                <ion-card>
                  <ion-card-content>Slide 2</ion-card-content>
                </ion-card>
              </ion-slide>
              <ion-slide>
                <ion-card>
                  <ion-card-content>Slide 3</ion-card-content>
                </ion-card>
              </ion-slide>
            </ion-slides>
          </ion-content>
        </ion-page>
      </ion-modal>
    </ion-content>
  </ion-page>
</template>

<script lang="ts">
import {
  IonPage,
  IonHeader,
  IonToolbar,
  IonTitle,
  IonContent,
  IonSlide,
  IonSlides,
  IonButton,
  IonModal
} from "@ionic/vue";
import { defineComponent, ref } from "vue";

export default defineComponent({
  name: "Home",
  components: {
    IonContent,
    IonHeader,
    IonPage,
    IonTitle,
    IonToolbar,
    IonSlide,
    IonSlides,
    IonButton,
    IonModal
  },
  setup() {
    const swiperRef = ref<any>(null);
    const showModal = ref<any>(false);
    const options = ref<any>({
    });

    return {
      showModal,
      options,
      swiperRef,
      modalLoaded: () => {
        swiperRef.value.$el.swiper.update();
      },
      setOpen: (value: boolean) => (showModal.value = value),
      goto: () => {
        swiperRef.value.$el.swiper.slideTo(1);
      }
    };
  }
});
</script>

<style scoped>
#container {
  text-align: center;

  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

#container strong {
  font-size: 20px;
  line-height: 26px;
}

#container p {
  font-size: 16px;
  line-height: 22px;

  color: #8c8c8c;

  margin: 0;
}

#container a {
  text-decoration: none;
}
</style>