How to define element ref with tsx in vue3 with rollup?

Question

I create a markdown editor component with vue3 and rollup and tsx, i also create an example with vue-cli and a vite-example with vite to test the editor.

project address

But when i test the component in example , there are some bugs, for example, onMounted doesn't work, ref.value for element always be null. Steps to reproduce

$ npm install
$ npm start

$ cd example
$ npm install
$ npm run serve

I use @vue/babel-plugin-jsx to compile jsx.

tsx code

setup () {
  const mTextareaRef = ref<HTMLTextAreaElement>()
  onMounted(() => {
    console.log('onMounted')
    console.log('mTextareaRef', mTextareaRef.value)
  })
  return () => (
    <div>
    ...
      <textarea
        ...
        ref={mTextareaRef}
      >
    </div>
  )
}

warning

[Vue warn]: Missing ref owner context. ref cannot be used on hoisted vnodes. A vnode with ref must be created inside the render function. 
  at <VueNextMEditor modelValue="# hello world" onUpdate:modelValue=fn > 
  at <App>

Answer 1

// ...
const mTextareaRef = ref<InstanceType<HTMLTextAreaElement>>()

// ...
<textarea ref={mTextareaRef} {...attrs} />