dynamic mount component with modelValue

[ustraframework]

I work my project with Vue3 and Nuxt3 then made dynamic mount function.

mount(
    component,
    { props, children, element, app }: { props?: any; children?: any; element?: any; app: any } = {
      props: undefined,
      children: undefined,
      element: undefined,
      app: undefined,
    },
  ) {
    let el = element

    let vNode = createVNode(component, props, children)
    if (app && app._context) vNode.appContext = app._context
    if (el) render(vNode, el)
    else if (typeof document !== 'undefined') render(vNode, (el = document.createElement('div')))

    const destroy = () => {
      if (el) render(null, el)
      el = null
      vNode = null
    }

    return { vNode, destroy, el }
  }

the mount function is mount component instance from component type, props and el.
And then create api as below.

export const useApprovalCommentPopup = () => {
  const instance = getCurrentInstance()
  const showPopup = ref(true)

  onMounted(async () => {
    const ApprovalPopup = await import('#ustra/nuxt-wijmo/management/pages/common/approval-popup.vue').then(r => r.default)

    const { el } = mount(ApprovalPopup, {
      app: $ustra.nuxtApp.vueApp,
      element: instance.vnode.el,
      props: {
        modelValue: showPopup.value,
        'onUpdate:modelValue': value => {
          console.log('onUpdate:modelValue', value)
          showPopup.value = value
        },
      },
    })
    // instance.vnode.el.appendChild(el)
  })

  return { showPopup }
}

useApprovalCommentPopup functions is mount component using mount function.
The showPopup variable's initial value is true, component mounted and show popup.
But popup is not close, when click close button.
When component mount using template tag, everything is okay.

What happen? Anyone knows a solution..?

I think modelValue is updated when "onUpdate:modelValue" prop, mounted component can't know updating value.