How to use the @vue/composition-api.createComponent function in @vue/composition-api

]}
          style={`left: ${parent.menu.left}px; bottom: ${parent.menu.bottom}px`}
          onClick={(e: Event) => { e.preventDefault() /* Prevent form submission */ }}
        >
          {slots.default()}
        
      ) : <div>
  },
})

interface Props {
  content: string
  onUpdate: (content: string) =&gt; any
}

const RichTextArea = createComponent({
  props: {
    content: String,
    onUpdate: Function,
  },
  setup(props, { emit, slots }) {
    const state = reactive({
      editor: useEditor({
        content: props.content,
        onUpdate: (content) =&gt; emit('update', content),
      }),
    })

    const { editor } = state

    return () =&gt; (
      <div class="sm-RichText sm-RichTextArea relative"></div></div>

import './RichTextArea.css'

import { createComponent, reactive } from '@vue/composition-api'
import { EditorContent, EditorMenuBubble } from 'tiptap'

import MenuItems from './MenuItems'
import useEditor from './useEditor'

const MenuElement = createComponent({
  setup(_, { slots, parent }: any) {
    return () =>
      parent && parent.menu ? (
        <div style="{`left:" transform="" border="" class="{["> { e.preventDefault() /* Prevent form submission */ }}
        &gt;
          {slots.default()}
        </div>
      ) : <div></div>

import { createComponent, computed } from '@vue/composition-api';
import { manager } from '@/base/manager';
import * as base from '@/base';
import { vueExtend } from '@/utils';

const component = vueExtend(createComponent({
  template: `
  <span>{{ status }}</span>
  <div>
    <span>{{ status }}</span>
    <span style="margin: 0 5px">|</span>
    <span>{{ value }}</span>
  </div>
  `,
  setup() {
    return {
      status: computed(() =&gt; {
        if (!base.status.value) {
          return '';
        } else if (typeof base.status.value === 'string') {
          return base.status;
        } else {

)
  },
})

const FileItem = createComponent({
  props: {
    filename: { type: String, required: true },
    link: { type: String, required: true },
  },
  setup(props) {
    return () => {
      const { filename, link } = props
      const [name, ext] = getFilenameAndExt(filename)

      return (
        <div class="flex items-center p-1 w-1/2 box-border">
          <a href="{link}">
            
          </a>
          <a class="flex mx-3 my-1 overflow-hidden" href="{link}">
            <span class="flex-shrink truncate">{name}</span></a></div>

if (pattern) {
        selectedPatternId.value = pattern.id;
      } else {
        selectedPatternId.value = null;
      }
    };

    Vue.extend({
      props: [],
    });

    Vue.extend({
      props: {},
    });

    const wrapper = vueExtend(createComponent({
      components: { Patterns },
      template: `
      
      `,
      setup: () => ({
        selectedPattern,
        setPattern,
        patterns: project.project.patterns,
        remove: (i: number) => project.project.removePattern(i),
      }),
    }));