On my Vue3 app, we have a ‘BaseModal’ component that does the basic stuff a modal would do (open, close, etc), but we’re looking to clean up some of the cumbersome code.

We were hoping to programmatically add the modal to the UI via a composable function:

import { h, Teleport } from 'vue'
import BaseModal from '@shared/components/BaseModal.vue'

export default function useModal({ to = 'body' } = {}) {
  const show = (props = {}, slots = {}) => {
    h(Teleport, { to }, h(BaseModal, { ...props }, { ...slots }))
  }

  return { show }
}

Potential usage:

const { show } = useModal()

show({ title: 'Foobar' })

Unfortunately, this doesn’t work at all. Am I using Teleport incorrectly? Potential workarounds?