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

/* tslint max-len: off */

import { defineComponent } from '@vue/composition-api'

const MenuButton = defineComponent({
  props: {
    isActive: Boolean,
    title: String,
  },
  setup(props, { slots, listeners }) {
    return () => (
      <button title="{props.title}" class="{[">
        {slots.default()}</button>

)
  },
})

export const TagFilterName = defineComponent({
  setup(_, { slots }) {
    return () => (
      <div class="tf-name bg-gray-100 text-gray-700 tracking-tight px-3 border-0 border-r border-solid border-gray-300">
        {slots.default()}
      </div>
    )
  },
})

export const TagFilterRemove = defineComponent({
  setup(_, { listeners }) {
    return () =&gt; (
      <button class="tf-remove button-reset el-icon-close ml-3 text-gray-700 text-base" title="Remove filter">
    )
  },
})
</button>

import { defineComponent, reactive, onBeforeMount } from '@vue/composition-api'
import { useQuery } from '@vue/apollo-composable'

import '../../components/ColourIcon.css'
import GroupIcon from '../../assets/inline/refactoring-ui/group.svg'

import '../../components/MiniIcon.css'
import CheckIcon from '../../assets/inline/refactoring-ui/check.svg'

import UploadDialog from './UploadDialog'
import ElapsedTime from '../../components/ElapsedTime'

import { getGroupDatabasesQuery } from '../../api/group'

const CheckColumn = defineComponent({
  props: {
    prop: { type: String, required: true },
    label: String,
  },
  setup(props) {
    return () => (
       (
              <span class="flex justify-center items-center h-5">
                { scope.row[props.prop]</span>

: null }
              
            ),
          },
        }}
      />
    )
  },
})

interface Props {
  handleRowClick: () => void
  groupId: string
}

const DatabasesTable = defineComponent({
  props: {
    handleRowClick: { type: Function, required: true },
    groupId: { type: String, required: true },
  },
  setup(props) {
    const state = reactive({
      showUploadDialog: false,
    })

    const { result, loading, refetch } = useQuery(
      getGroupDatabasesQuery,
      { groupId: props.groupId },
      { fetchPolicy: 'no-cache' },
    )

    onBeforeMount(refetch)

import { defineComponent, computed } from '@vue/composition-api'
import { Input } from 'element-ui'

import * as Form from '../../components/Form'

export const DOI_ORG_DOMAIN = 'https://doi.org/'

interface Props {
  value: string
}

const DoiField = defineComponent({
  inheritAttrs: false,
  props: {
    value: String,
  },
  setup(props, { attrs, listeners }) {
    const inputValue = computed(() =>
      props.value
        ? props.value.replace(DOI_ORG_DOMAIN, '')
        : '',
    )

    const onInput = (value: string) => {
      listeners.input(value.length ? `${DOI_ORG_DOMAIN}${value}` : '')
    }

    return () => (

}
    if (message.type === 'malformed_csv') {
      return 'The file format does not look correct. Please check that the file is tab-separated'
        + ' and contains three columns: id, name, and formula.'
    }
  }
  return 'Something went wrong, please try again later.'
}

interface Props {
  name: string,
  details?: MolecularDBDetails,
  groupId: string,
}

const UploadDialog = defineComponent({
  props: {
    name: String,
    details: Object,
    groupId: String,
  },
  setup(props, { emit, root }) {
    const state = reactive({
      model: {
        name: props.name,
        version: '',
        filePath: '',
      },
      loading: false,
      error: '',
    })

}

interface State {
  error: boolean
  fileName: string | null
  progress: number
  status: 'IDLE' | 'HAS_FILE' | 'ERROR'
}

interface Props {
  disabled: boolean
  removeFile: () => void
  uploadSuccessful: (filename: string, filePath: string) => void
}

const UppyUploader = defineComponent({
  inheritAttrs: false,
  props: {
    disabled: Boolean,
    formatError: Function,
    removeFile: Function,
    uploadSuccessful: { type: Function, required: true },
  },
  setup(props, { attrs }) {
    const state = reactive({
      error: false,
      fileName: null,
      progress: 0,
      status: 'IDLE',
    })

    preventDropEvents()

done: boolean
  project: ViewProjectResult
}

interface State {
  editing: boolean
  errors: { [field: string]: string }
  loading: boolean
  model: {
    name: string,
    urlSlug: string | null,
    projectDescription: string | null
  }
}

const PrepareProject = defineComponent({
  props: {
    active: Boolean,
    currentUserName: String,
    done: Boolean,
    project: Object,
    updateProject: Function,
  },
  setup(props) {
    const state = reactive({
      editing: false,
      errors: {},
      loading: false,
      model: getInitialModel(props.project, props.currentUserName),
    })

    const submit = async() => {

import {
  databaseDetailsQuery,
  DatabaseDetailsQuery,
  MolecularDB,
  updateDatabaseDetailsMutation,
  UpdateDatabaseDetailsMutation,
} from '../../api/moldb'
import { getDatabaseDetails } from './formatting'

interface Props {
  id: number
  canDelete: boolean
  close: () => void
}

const Details = defineComponent({
  props: {
    id: { type: Number, required: true },
    canDelete: { type: Boolean, default: false },
    close: { type: Function, required: true },
  },
  setup(props, { root }) {
    const { result, refetch, onResult } = useQuery(
      databaseDetailsQuery,
      { id: props.id },
      { fetchPolicy: 'no-cache' },
    )

    onResult(result => {
      if (result && result.errors) {
        root.$message({ message: 'Sorry, something went wrong', type: 'error' })
        props.close()

import { defineComponent } from '@vue/composition-api'

export const TagFilterOuter = defineComponent({
  setup(_, { slots }) {
    return () => (
      <div class="tf-outer border-gray-300 border border-solid text-sm pr-3">
        {slots.default()}
      </div>
    )
  },
})

export const TagFilterName = defineComponent({
  setup(_, { slots }) {
    return () =&gt; (
      <div class="tf-name bg-gray-100 text-gray-700 tracking-tight px-3 border-0 border-r border-solid border-gray-300">
        {slots.default()}
      </div>
    )