How to use the @vue/apollo-composable.useQuery function in @vue/apollo-composable

setup(props) {
    const queryOptions = reactive({ enabled: false })
    const queryVars = computed(() => ({ id: props.datasetId }))
    const query = useQuery(datasetVisibilityQuery, queryVars, queryOptions)
    const loadVisibility = () => { queryOptions.enabled = true }

    const visibilityText = computed(() => {
      if (query.result.value != null) {
        const { datasetVisibility, currentUser } = query.result.value
        if (datasetVisibility != null) {
          const { submitter, group, projects } = datasetVisibility
          const submitterName = currentUser && submitter.id === currentUser.id ? 'you' : submitter.name
          const all = [
            submitterName,
            ...(group ? [group.name] : []),
            ...(projects || []).map(p => p.name),
          ]
          return 'These annotation results are not publicly visible. '
            + `They are visible to ${all.join(', ')} and METASPACE Administrators.`
        }

setup(props, { emit }) {
    const { datasetId } = toRefs(props)
    const {
      result: downloadLinkResult,
      loading,
    } = useQuery(getDatasetDownloadLink, { datasetId }, { fetchPolicy: 'no-cache' })
    const downloadLinks = computed(() => downloadLinkResult.value != null
      ? safeJsonParse(downloadLinkResult.value.dataset.downloadLinkJson)
      : null)

    return () => {
      let content
      if (loading.value) {
        content = <div class="h-64">
      } else if (downloadLinks.value == null) {
        content = <div><h1>Error</h1><p>This dataset cannot be downloaded.</p></div>
      } else {
        const { license, contributors, files } = downloadLinks.value
        const authorStr = contributors.length !== 1 ? 'authors' : 'author'
        content = (
          <div>
            <p></p></div></div>

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()
      }
    })

    const state = reactive({
      showNewVersionDialog: false,
    })

export default function useRoute ({ query, variables }) {
  const { result, loading, error } = useQuery(query, variables)

  const data = useResult(result, null, (data) => {
    if (data.route) { return data.route }
    return null
  })

  return {
    data,
    loading,
    error
  }
}

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 = () => {
      onDialogClose()
      refetch()
    }

export default function useEssays ({ query, variables }) {
  const { result, loading, error } = useQuery(query, variables)

  const essays = useResult(result, null, (data) => {
    if (data.peceEssays && data.peceEssays.items.length) { return data.peceEssays.items }
    return null
  })

  return {
    essays,
    loading,
    error
  }
}