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

setup(props, { emit, slots }) {
    const state = reactive({
      editor: useEditor({
        content: props.content,
        onUpdate: (content) => emit('update', content),
      }),
    })

    const { editor } = state

    return () => (
      <div class="sm-RichText sm-RichTextArea relative">
        {slots.label &amp;&amp; <label> { editor.focus() }}&gt;{slots.label()}</label>}
        </div>

setup(props) {
    const state = reactive({
      showUploadDialog: false,
    })

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

    onBeforeMount(refetch)

    const onDialogClose = () => {
      state.showUploadDialog = false
    }

    const onUploadComplete = () => {

export default function usePromise(fn) {
  if (!fn) {
    throw new Error(
      `[usePromise]: 1st argument is required (must be a function)`
    )
  }

  if (typeof fn !== 'function') {
    throw new Error(
      `[usePromise]: argument has to be function, but received ${typeof fn}`
    )
  }
  const state = reactive({
    loading: false,
    error: null,
    result: null,
  })

  let lastPromise
  const use = async (...args) => {
    state.error = null
    state.loading = true
    const promise = (lastPromise = fn(...args))
    try {
      const result = await promise
      if (lastPromise === promise) {
        state.result = result
      }
    } catch (e) {

setup(props, _context) {
      const state = reactive({
        likesCount: props.initLikesCount,
        isLiked: props.initIsLiked,
        isLoading: false,
      })

      let likeMutation = null
      let unlikeMutation = null
      if (props.resourceName === 'WorkRecord') {
        likeMutation = new LikeWorkRecordMutation({ workRecordId: props.resourceId })
        unlikeMutation = new UnlikeWorkRecordMutation({ workRecordId: props.resourceId })
      }

      const toggleLike = async () => {
        if (!props.isSignedIn) {
          ($('.c-sign-up-modal') as any).modal('show')
          return

setup(props, context) {
      const state = reactive({
        work: null,
        vodChannels: [],
        breadcrumbItems: [],
      })

      const removeCommentGuard = (event) => {
        $(event.target).parents('.p-work-records-show__content').removeClass('c-comment-guard')
      }

      onMounted(async () => {
        const [work, vodChannels] = await Promise.all([
          new FetchWorkQuery({ workId: props.workId }).execute(),
          new FetchVodChannelsQuery().execute()
        ])
        state.work = work
        state.vodChannels = vodChannels.map(vodChannel => {

setup () {
    const state = reactive({ darkTheme: false })

    onMounted(() => {
      state.darkTheme = window.getComputedStyle(document.documentElement).getPropertyValue('content') === 'dark' ||
        !!localStorage.getItem('darkTheme') ||
        false
    })

    function toggleDarkTheme () {
      state.darkTheme = !state.darkTheme
      if (state.darkTheme) {
        return localStorage.setItem('darkTheme', 'on')
      }
      localStorage.removeItem('darkTheme')
    }

    return {

setup(props) {
    const rows = computed(() => getRows(props.currentUser))
    const state = reactive({
      showTransferDatasetsDialog: false,
      invitingGroup: null,
    })

    async function handleAcceptTransferDatasets(selectedDatasetIds: string[]) {
      try {
        await apolloClient.mutate({
          mutation: acceptGroupInvitationMutation,
          variables: { groupId: state.invitingGroup!.id },
        })
        if (selectedDatasetIds.length > 0) {
          await apolloClient.mutate({
            mutation: importDatasetsIntoGroupMutation,
            variables: { groupId: state.invitingGroup!.id, datasetIds: selectedDatasetIds },
          })
        }

setup(props) {
    const state = reactive({
      editor: useEditor({
        extensions: [
          new OnEscape(() => {
            state.editing = false
            state.editor.blur()
          }),
        ].concat(
          props.placeholder ? new Placeholder({
            emptyNodeText: props.placeholder,
            emptyNodeClass: 'sm-RichText-placeholder',
            showOnlyWhenEditable: false,
          }) : [],
        ),
        editable: !props.readonly,
        content: props.content,
        onUpdate: async(content: string) => {

setup() {
    const state = reactive({
      agreed: get(cookieKey) === cookieValue,
    })

    const agree = () => {
      set(cookieKey, cookieValue)
      state.agreed = true
    }

    return () => (
      state.agreed
        ? null
        : <div style="z-index: 999" class="fixed bottom-0 left-0 right-0 bg-body text-white leading-6 py-1 text-sm">
          <button class="button-reset float-right cursor-pointer mx-1 h-6">
            
          </button>
          <p class="m-0 text-center px-2"></p></div>

setup (_, { emit }) {
    const state = reactive({
      filter: []
    })

    return {
      ...toRefs(state)
    }
  }
}