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

function handler(e: StorageEvent) {
    if (e.key === key) {
      value.value = e.newValue ? parseValue(e.newValue) : null;
    }
  }

  onMounted(() => {
    if (!initialized) {
      init();
    }

    window.addEventListener('storage', handler, true);
  });

  onUnmounted(() => {
    localStorage.setItem(key, JSON.stringify(value.value));
    window.removeEventListener('storage', handler);
  });

  return {
    value
  };
}

export function useClipboard() {
  const text = ref('');

  async function onCopy() {
    text.value = await navigator.clipboard.readText();
  }

  onMounted(() => {
    window.addEventListener('copy', onCopy);
  });

  onUnmounted(() => {
    window.removeEventListener('copy', onCopy);
  });

  function write(txt: string) {
    text.value = txt;

    return navigator.clipboard.writeText(txt);
  }

  return {
    text,
    write
  };
}

isIntersecting.value = false;
    }, options);

    observe();
  });

  function unobserve() {
    if (!observer) return;

    if (target.value) {
      observer.unobserve(target.value);
    }
  }

  onUnmounted(unobserve);

  return {
    intersectionRatio,
    isIntersecting,
    isFullyInView,
    observe,
    unobserve
  };
}

});

  function onDeviceMotion(event: DeviceMotionEvent) {
    acceleration.value = event.acceleration;
    accelerationIncludingGravity.value = event.accelerationIncludingGravity;
    rotationRate.value = event.rotationRate;
    interval.value = event.interval;
  }

  const handler = options.throttleMs ? throttle(options.throttleMs, onDeviceMotion) : onDeviceMotion;

  onMounted(() => {
    window.addEventListener('devicemotion', handler, false);
  });

  onUnmounted(() => {
    window.removeEventListener('devicemotion', handler, false);
  });

  return {
    acceleration,
    accelerationIncludingGravity,
    rotationRate,
    interval
  };
}

function useEvent(el, name, listener, options) {
    const element = wrap(el);
    const remove = () => element.value.removeEventListener(name, listener);
    compositionApi.onMounted(() => element.value.addEventListener(name, listener, options));
    compositionApi.onUnmounted(remove);
    return remove;
}

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

});

  function updatePosition(position: Position) {
    locatedAt.value = position.timestamp;
    coords.value = position.coords;
    error.value = '';
  }

  let watcher: number;
  onMounted(() => {
    if ('geolocation' in navigator) {
      watcher = window.navigator.geolocation.watchPosition(updatePosition, undefined, options);
    }
  });

  onUnmounted(() => {
    if (watcher) {
      window.navigator.geolocation.clearWatch(watcher);
    }
  });

  return {
    coords,
    locatedAt,
    error
  };
}

function preventDropEvents() {
  const preventDefault = (e: Event) => {
    e.preventDefault()
  }
  window.addEventListener('dragover', preventDefault, false)
  window.addEventListener('drop', preventDefault, false)

  onUnmounted(() => {
    window.removeEventListener('dragover', preventDefault)
    window.removeEventListener('drop', preventDefault)
  })
}