Vue in React Component

VueWithReactComponent.tsx

import { useEffect, useRef } from 'react'

interface IComponentProps<T> {
  // TODO
}

const template = `
  <div></div>
`

export const VueWithReactComponent = <T,>(props: IComponentProps<T>) => {
  const ref = useRef<HTMLDivElement>(null)

  const render = async () => {
    if (typeof window === 'undefined') return
    const { createApp, ref: vueRef, onMounted } = window.Vue

    createApp({
      setup() {
        const componentRef = vueRef(null)

        onMounted(() => {
          // TODO
        })

        return {
          componentRef
        }
      }
    }).mount(ref.current)
  }

  useEffect(() => {
    render()
  }, [])

  return (
    <div
      ref={ref}
      dangerouslySetInnerHTML={{
        __html: template,
      }}
    ></div>
  )
}

export default VueWithReactComponent