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

if (state.changed) {
        current.value = state;
      }
    }
  );

  const initialState = rehydratedState
    ? State.create(rehydratedState)
    : service.initialState;

  const current = ref>(initialState);

  // extract send method for sending events to the service
  const send = (event: TEvent | TEvent['type']) => service.send(event);

  onBeforeMount(() => {
    service.start(rehydratedState ? initialState : undefined);
  });

  onBeforeUnmount(() => {
    service.stop();
  });

  return {
    current,
    service,
    send
  };
}

export function onWindowResize (callback) {
  onBeforeMount(() => {
    window.addEventListener('resize', callback)
  })
  onUnmounted(() => {
    window.removeEventListener('resize', callback)
  })
}

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

    return () => (
      <div>
        <header class="flex justify-between items-center py-3">
          <div class="flex items-center">
            
            <p class="m-0 ml-1 text-sm leading-5 text-gray-700"></p></div></header></div>

export function useWindowScrollPosition(options: WindowScrollOptions = { throttleMs: 100 }) {
  const x = ref(0);
  const y = ref(0);

  function setScrollPos() {
    x.value = window.pageXOffset;
    y.value = window.pageYOffset;
  }

  const onScroll = throttle(options.throttleMs, setScrollPos);

  onBeforeMount(() => {
    setScrollPos();
  });

  onMounted(() => {
    window.addEventListener('scroll', onScroll, { passive: true });
  });

  onUnmounted(() => {
    window.removeEventListener('scroll', onScroll);
  });

  return {
    x,
    y
  };
}

export function useWindowSize(options: WindowSizeOptions = { throttleMs: 100 }) {
  const width = ref(0);
  const height = ref(0);

  function setSize() {
    width.value = window.innerWidth;
    height.value = window.innerHeight;
  }

  const onScroll = throttle(options.throttleMs, setSize);
  onBeforeMount(() => {
    setSize();
  });

  onMounted(() => {
    window.addEventListener('resize', onScroll, { passive: true });
  });

  onUnmounted(() => {
    window.removeEventListener('resize', onScroll);
  });

  return {
    height,
    width
  };
}