Problem

I'm using Ionic v8 with Vue 3 and have a component that wraps an <ion-datetime> inside an <ion-modal>. The modal is triggered by a button in the parent component using a unique id passed via props. The is supposed to emit an ionChange event when the user selects a different date and taps the confirmation button. However, the event never fires (the console.log("here") inside handleEmit is never logged).

Versions (for reference):

Ionic Vue: 8.3.3 Vue: 3.3.0

Code

Child Component (DateTimeModal.vue)

<script setup>
import {IonDatetime, IonModal} from "@ionic/vue";
import {computed, ref} from "vue";

const props = defineProps([
  'time',
  'modalTrigger'
])

const emit = defineEmits([
  'emitDateChange'
])

const dateTime = ref(props.time)

const dateTimeComputed = computed(() => {
  return dateTime.value
})

function handleEmit(event) {
  console.log("here")
  dateTime.value = event.detail.value
  console.log(dateTime.value)
  emit('emitDateChange', dateTime.value)
}

</script>

<template>
  <ion-modal :trigger="props.modalTrigger" :initial-breakpoint="1" :breakpoints="[0, 1]"
             class="text-gray-500">
    <div class="flex justify-center">
      <ion-datetime @ionChange="handleEmit($event)" presentation="date" :value="dateTimeComputed" :show-default-buttons="true"></ion-datetime>
    </div>
  </ion-modal>
</template>

Parent Component (simplified)

<button v-if="formattedStartDate === formattedEndDate" class="bg-transparent"
        :id="`open-modal${props.modalIndex}`">
  <ion-icon :icon="calendarOutline" class="text-2xl lg:text-lg"></ion-icon>
</button>

<DateModalComponent
    v-if="formattedStartDate === formattedEndDate"
    :modal-trigger="`open-modal${props.modalIndex}`"
    :time="localStartTime"
    @emitDateChange="changeOneDate"
>
</DateModalComponent>

I'm not seeing any errors in the console, but the event handler just doesn't run. Any ideas on what might be causing ionChange not to fire, or how I can get the selected date reliably once the user changes it?

Interestingly, it was working fine two days ago, but it suddenly stopped without any code changes.

Any help or suggestions would be greatly appreciated!

• The modal opens correctly when I click the parent button, and the <ion-datetime> UI appears.
• The onMounted log in the child confirms that props.modalTrigger is set.
• However, changing the date (and tapping the confirmation button) never triggers the ionChange event — the console.log("here") inside handleEmit is never called.
• I'm expecting ionChange to fire after the user selects a date and confirms it.

For me, if I imported IonDatetime, that ionChange event will not fire. If I omitted the import, the event fired.