Auto imports and `<component :is="" />`

// In constants/calendars.ts
import { CalendarPreferences, CalendarFoo } from '#components'
export const CALENDAR_COMPONENTS = {
  PREFERENCES: CalendarPreferences,
  FOO: CalendarFoo,
} as const
Object.freeze(CALENDAR_COMPONENTS)
export type CALENDAR_COMPONENTS = (typeof CALENDAR_COMPONENTS)[keyof typeof CALENDAR_COMPONENTS]


// In a child component
<CalendarControl
  :heading="t('availability.rentalSeason')"
  :subheading="legibileSeason ?? t('availability.rentalSeasonPlaceholder')"
  @click="selectComponent(CALENDAR_COMPONENTS.FOO)" // Select CalendarFoo to mount in parent
/>

const emit = defineEmits<{
  selectComponent: [component: keyof CALENDAR_COMPONENTS]
}>()

function selectComponent(component: keyof CALENDAR_COMPONENTS) {
  emit('selectComponent', component)
}


// In parent
function handleSelectControl(control: keyof CALENDAR_COMPONENTS) {
  currentComponent.value = CALENDAR_COMPONENTS[control as keyof typeof CALENDAR_COMPONENTS]
}

<component
  :is="currentComponent"
  @select-control="handleSelectControl"
/>