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

//   if (value == null) {
  //     enabled.value = enabledOption.value
  //   }
  // })

  // Auto start & stop
  watch(isEnabled, value => {
    if (value) {
      start()
    } else {
      stop()
    }
  })

  // Teardown
  onBeforeUnmount(stop)

  return {
    result,
    loading,
    error,
    // @TODO doesn't fully work yet
    // enabled,
    start,
    stop,
    restart,
    document: documentRef,
    variables: variablesRef,
    options: optionsRef,
    subscription,
    onResult: resultEvent.on,
    onError: errorEvent.on,

);

  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
  };
}

//   if (value == null) {
  //     enabled.value = enabledOption.value
  //   }
  // })

  // Auto start & stop
  watch(isEnabled, value => {
    if (value) {
      start()
    } else {
      stop()
    }
  })

  // Teardown
  onBeforeUnmount(() => {
    stop()
    subscribeToMoreItems.length = 0
  })

  return {
    result,
    loading,
    networkStatus,
    error,
    // @TODO doesn't fully work yet
    // enabled,
    start,
    stop,
    restart,
    document: documentRef,
    variables: variablesRef,

function track (loading: Ref, type: keyof LoadingTracking) {
  const { appTracking, tracking } = getCurrentTracking()

  watch(loading, (value, oldValue) => {
    if (oldValue != null && value !== oldValue) {
      const mod = value ? 1 : -1
      tracking[type].value += mod
      appTracking[type].value += mod
    }
  })

  onBeforeUnmount(() => {
    if (loading.value) {
      tracking[type].value--
      appTracking[type].value--
    }
  })
}

export function useEventListener(
  target: T | Ref,
  type: string,
  handler: EventListener,
  options?: AddEventListenerOptions
) {
  onMounted(() => {
    const t = isRef(target) ? target.value : target;

    t.addEventListener(type, handler, options);
  });

  onBeforeUnmount(() => {
    const t = isRef(target) ? target.value : target;

    t.removeEventListener(type, handler, options);
  });
}

export function useMachine(
  stateMachine: StateMachine.Machine
): {
  state: Ref>;
  send: StateMachine.Service['send'];
  service: StateMachine.Service;
} {
  const state = ref>(stateMachine.initialState);
  const service = interpret(stateMachine);
  const send = (event: TE | TE['type']) => service.send(event);

  service.subscribe(s => (state.value = s));
  service.start();

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

  return { state, send, service };
}

try {
      abort();
      isLoading.value = true;
      controller = new AbortController();
      const result = await newPromiseFn(newParams, controller.signal);
      error.value = undefined;
      data.value = result;
    } catch (e) {
      error.value = e;
      data.value = undefined;
    } finally {
      isLoading.value = false;
    }
  });

  onBeforeUnmount(abort);

  return {
    isLoading,
    error,
    data,
    abort,
    retry
  };
}