@vueuse/components 10.0.0-beta.1 → 10.0.0-beta.3

package/index.mjs

@@ -1,6 +1,6 @@
-import { defineComponent, ref, h, watch, computed, reactive, shallowRef, nextTick, watchEffect, toRef, toRefs } from 'vue-demi';
+import { defineComponent, ref, h, watch, computed, reactive, shallowRef, nextTick, getCurrentInstance, onMounted, watchEffect, toRef, toRefs } from 'vue-demi';
 import { onClickOutside as onClickOutside$1, useActiveElement, useBattery, useBrowserLocation, useDark, useDeviceMotion, useDeviceOrientation, useDevicePixelRatio, useDevicesList, useDocumentVisibility, useStorage as useStorage$1, isClient as isClient$1, useDraggable, useElementBounding, useElementSize as useElementSize$1, useElementVisibility as useElementVisibility$1, useEyeDropper, useFullscreen, useGeolocation, useIdle, useMouse, useMouseInElement, useMousePressed, useNetwork, useNow, useObjectUrl, useOffsetPagination, useOnline, usePageLeave, usePointer, usePointerLock, usePreferredColorScheme, usePreferredContrast, usePreferredDark as usePreferredDark$1, usePreferredLanguages, usePreferredReducedMotion, useMutationObserver, useTimeAgo, useTimestamp, useVirtualList, useWindowFocus, useWindowSize } from '@vueuse/core';
-import { resolveUnref, isClient, isString, noop, tryOnScopeDispose, isIOS, directiveHooks, pausableWatch, isFunction, tryOnMounted, resolveRef, useToggle, promiseTimeout, useDebounceFn, useThrottleFn } from '@vueuse/shared';
+import { resolveUnref, isClient, isString, noop, tryOnScopeDispose, isIOS, directiveHooks, pausableWatch, isFunction, resolveRef, tryOnMounted, useToggle, promiseTimeout, useDebounceFn, useThrottleFn } from '@vueuse/shared';
 
 const OnClickOutside = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
   name: "OnClickOutside",
@@ -52,14 +52,20 @@ function useEventListener(...args) {
     el.addEventListener(event, listener, options2);
     return () => el.removeEventListener(event, listener, options2);
   };
-  const stopWatch = watch(() => [unrefElement(target), resolveUnref(options)], ([el, options2]) => {
-    cleanup();
-    if (!el)
-      return;
-    cleanups.push(...events.flatMap((event) => {
-      return listeners.map((listener) => register(el, event, listener, options2));
-    }));
-  }, { immediate: true, flush: "post" });
+  const stopWatch = watch(
+    () => [unrefElement(target), resolveUnref(options)],
+    ([el, options2]) => {
+      cleanup();
+      if (!el)
+        return;
+      cleanups.push(
+        ...events.flatMap((event) => {
+          return listeners.map((listener) => register(el, event, listener, options2));
+        })
+      );
+    },
+    { immediate: true, flush: "post" }
+  );
   const stop = () => {
     stopWatch();
     cleanup();
@@ -133,7 +139,7 @@ const vOnClickOutside = {
   }
 };
 
-const createKeyPredicate = (keyFilter) => {
+function createKeyPredicate(keyFilter) {
   if (typeof keyFilter === "function")
     return keyFilter;
   else if (typeof keyFilter === "string")
@@ -141,7 +147,7 @@ const createKeyPredicate = (keyFilter) => {
   else if (Array.isArray(keyFilter))
     return (event) => keyFilter.includes(event.key);
   return () => true;
-};
+}
 function onKeyStroke(...args) {
   let key;
   let handler;
@@ -163,9 +169,16 @@ function onKeyStroke(...args) {
     key = true;
     handler = args[0];
   }
-  const { target = defaultWindow, eventName = "keydown", passive = false } = options;
+  const {
+    target = defaultWindow,
+    eventName = "keydown",
+    passive = false,
+    dedupe = false
+  } = options;
   const predicate = createKeyPredicate(key);
   const listener = (e) => {
+    if (e.repeat && resolveUnref(dedupe))
+      return;
     if (predicate(e))
       handler(e);
   };
@@ -225,7 +238,10 @@ function onLongPress(target, handler, options) {
       ev.preventDefault();
     if ((_c = options == null ? void 0 : options.modifiers) == null ? void 0 : _c.stop)
       ev.stopPropagation();
-    timeout = setTimeout(() => handler(ev), (_d = options == null ? void 0 : options.delay) != null ? _d : DEFAULT_DELAY);
+    timeout = setTimeout(
+      () => handler(ev),
+      (_d = options == null ? void 0 : options.delay) != null ? _d : DEFAULT_DELAY
+    );
   }
   const listenerOptions = {
     capture: (_a = options == null ? void 0 : options.modifiers) == null ? void 0 : _a.capture,
@@ -242,9 +258,13 @@ const OnLongPress = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
   emits: ["trigger"],
   setup(props, { slots, emit }) {
     const target = ref();
-    onLongPress(target, (e) => {
-      emit("trigger", e);
-    }, props.options);
+    onLongPress(
+      target,
+      (e) => {
+        emit("trigger", e);
+      },
+      props.options
+    );
     return () => {
       if (slots.default)
         return h(props.as || "div", { ref: target }, slots.default());
@@ -390,7 +410,11 @@ function useStorage(key, defaults, storage, options = {}) {
   const rawInit = resolveUnref(defaults);
   const type = guessSerializerType(rawInit);
   const serializer = (_a = options.serializer) != null ? _a : StorageSerializers[type];
-  const { pause: pauseWatch, resume: resumeWatch } = pausableWatch(data, () => write(data.value), { flush, deep, eventFilter });
+  const { pause: pauseWatch, resume: resumeWatch } = pausableWatch(
+    data,
+    () => write(data.value),
+    { flush, deep, eventFilter }
+  );
   if (window && listenToStorageChanges) {
     useEventListener(window, "storage", update);
     useEventListener(window, customStorageEventName, updateFromCustomEvent);
@@ -467,12 +491,22 @@ function useStorage(key, defaults, storage, options = {}) {
   }
 }
 
-function useSupported(callback, sync = false) {
-  const isSupported = ref();
-  const update = () => isSupported.value = Boolean(callback());
-  update();
-  tryOnMounted(update, sync);
-  return isSupported;
+function useMounted() {
+  const isMounted = ref(false);
+  if (getCurrentInstance()) {
+    onMounted(() => {
+      isMounted.value = true;
+    });
+  }
+  return isMounted;
+}
+
+function useSupported(callback) {
+  const isMounted = useMounted();
+  return computed(() => {
+    isMounted.value;
+    return Boolean(callback());
+  });
 }
 
 function useMediaQuery(query, options = {}) {
@@ -493,7 +527,9 @@ function useMediaQuery(query, options = {}) {
       return;
     cleanup();
     mediaQuery = window.matchMedia(resolveRef(query).value);
-    matches.value = mediaQuery.matches;
+    matches.value = !!(mediaQuery == null ? void 0 : mediaQuery.matches);
+    if (!mediaQuery)
+      return;
     if ("addEventListener" in mediaQuery)
       mediaQuery.addEventListener("change", update);
     else
@@ -535,6 +571,7 @@ function useColorMode(options = {}) {
     listenToStorageChanges = true,
     storageRef,
     emitAuto,
+    // TODO: switch to true in v10
     disableTransition = false
   } = options;
   const modes = __spreadValues$b({
@@ -553,33 +590,36 @@ function useColorMode(options = {}) {
       store.value = v;
     }
   });
-  const updateHTMLAttrs = getSSRHandler("updateHTMLAttrs", (selector2, attribute2, value) => {
-    const el = window == null ? void 0 : window.document.querySelector(selector2);
-    if (!el)
-      return;
-    let style;
-    if (disableTransition) {
-      style = window.document.createElement("style");
-      style.type = "text/css";
-      style.appendChild(document.createTextNode("*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}"));
-      window.document.head.appendChild(style);
-    }
-    if (attribute2 === "class") {
-      const current = value.split(/\s/g);
-      Object.values(modes).flatMap((i) => (i || "").split(/\s/g)).filter(Boolean).forEach((v) => {
-        if (current.includes(v))
-          el.classList.add(v);
-        else
-          el.classList.remove(v);
-      });
-    } else {
-      el.setAttribute(attribute2, value);
-    }
-    if (disableTransition) {
-      window.getComputedStyle(style).opacity;
-      document.head.removeChild(style);
+  const updateHTMLAttrs = getSSRHandler(
+    "updateHTMLAttrs",
+    (selector2, attribute2, value) => {
+      const el = window == null ? void 0 : window.document.querySelector(selector2);
+      if (!el)
+        return;
+      let style;
+      if (disableTransition) {
+        style = window.document.createElement("style");
+        style.type = "text/css";
+        style.appendChild(document.createTextNode("*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}"));
+        window.document.head.appendChild(style);
+      }
+      if (attribute2 === "class") {
+        const current = value.split(/\s/g);
+        Object.values(modes).flatMap((i) => (i || "").split(/\s/g)).filter(Boolean).forEach((v) => {
+          if (current.includes(v))
+            el.classList.add(v);
+          else
+            el.classList.remove(v);
+        });
+      } else {
+        el.setAttribute(attribute2, value);
+      }
+      if (disableTransition) {
+        window.getComputedStyle(style).opacity;
+        document.head.removeChild(style);
+      }
     }
-  });
+  );
   function defaultOnChanged(mode) {
     var _a;
     const resolvedMode = mode === "auto" ? preferredMode.value : mode;
@@ -719,7 +759,8 @@ const UseDraggable = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
     "stopPropagation",
     "pointerTypes",
     "as",
-    "handle"
+    "handle",
+    "axis"
   ],
   setup(props, { slots }) {
     const target = ref();
@@ -727,7 +768,11 @@ const UseDraggable = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
       var _a;
       return (_a = props.handle) != null ? _a : target.value;
     });
-    const storageValue = props.storageKey && useStorage$1(props.storageKey, resolveUnref(props.initialValue) || { x: 0, y: 0 }, isClient$1 ? props.storageType === "session" ? sessionStorage : localStorage : void 0);
+    const storageValue = props.storageKey && useStorage$1(
+      props.storageKey,
+      resolveUnref(props.initialValue) || { x: 0, y: 0 },
+      isClient$1 ? props.storageType === "session" ? sessionStorage : localStorage : void 0
+    );
     const initialValue = storageValue || props.initialValue || { x: 0, y: 0 };
     const onEnd = (position) => {
       if (!storageValue)
@@ -833,13 +878,21 @@ function useResizeObserver(target, callback, options = {}) {
       observer = void 0;
     }
   };
-  const stopWatch = watch(() => unrefElement(target), (el) => {
-    cleanup();
-    if (isSupported.value && window && el) {
-      observer = new ResizeObserver(callback);
-      observer.observe(el, observerOptions);
-    }
-  }, { immediate: true, flush: "post" });
+  const targets = computed(
+    () => Array.isArray(target) ? target.map((el) => unrefElement(el)) : [unrefElement(target)]
+  );
+  const stopWatch = watch(
+    targets,
+    (els) => {
+      cleanup();
+      if (isSupported.value && window) {
+        observer = new ResizeObserver(callback);
+        for (const _el of els)
+          _el && observer.observe(_el, observerOptions);
+      }
+    },
+    { immediate: true, flush: "post", deep: true }
+  );
   const stop = () => {
     cleanup();
     stopWatch();
@@ -859,30 +912,37 @@ function useElementSize(target, initialSize = { width: 0, height: 0 }, options =
   });
   const width = ref(initialSize.width);
   const height = ref(initialSize.height);
-  useResizeObserver(target, ([entry]) => {
-    const boxSize = box === "border-box" ? entry.borderBoxSize : box === "content-box" ? entry.contentBoxSize : entry.devicePixelContentBoxSize;
-    if (window && isSVG.value) {
-      const $elem = unrefElement(target);
-      if ($elem) {
-        const styles = window.getComputedStyle($elem);
-        width.value = parseFloat(styles.width);
-        height.value = parseFloat(styles.height);
-      }
-    } else {
-      if (boxSize) {
-        const formatBoxSize = Array.isArray(boxSize) ? boxSize : [boxSize];
-        width.value = formatBoxSize.reduce((acc, { inlineSize }) => acc + inlineSize, 0);
-        height.value = formatBoxSize.reduce((acc, { blockSize }) => acc + blockSize, 0);
+  useResizeObserver(
+    target,
+    ([entry]) => {
+      const boxSize = box === "border-box" ? entry.borderBoxSize : box === "content-box" ? entry.contentBoxSize : entry.devicePixelContentBoxSize;
+      if (window && isSVG.value) {
+        const $elem = unrefElement(target);
+        if ($elem) {
+          const styles = window.getComputedStyle($elem);
+          width.value = parseFloat(styles.width);
+          height.value = parseFloat(styles.height);
+        }
       } else {
-        width.value = entry.contentRect.width;
-        height.value = entry.contentRect.height;
+        if (boxSize) {
+          const formatBoxSize = Array.isArray(boxSize) ? boxSize : [boxSize];
+          width.value = formatBoxSize.reduce((acc, { inlineSize }) => acc + inlineSize, 0);
+          height.value = formatBoxSize.reduce((acc, { blockSize }) => acc + blockSize, 0);
+        } else {
+          width.value = entry.contentRect.width;
+          height.value = entry.contentRect.height;
+        }
       }
+    },
+    options
+  );
+  watch(
+    () => unrefElement(target),
+    (ele) => {
+      width.value = ele ? initialSize.width : 0;
+      height.value = ele ? initialSize.height : 0;
     }
-  }, options);
-  watch(() => unrefElement(target), (ele) => {
-    width.value = ele ? initialSize.width : 0;
-    height.value = ele ? initialSize.height : 0;
-  });
+  );
   return {
     width,
     height
@@ -914,27 +974,63 @@ const UseElementVisibility = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
   }
 });
 
+function useIntersectionObserver(target, callback, options = {}) {
+  const {
+    root,
+    rootMargin = "0px",
+    threshold = 0.1,
+    window = defaultWindow
+  } = options;
+  const isSupported = useSupported(() => window && "IntersectionObserver" in window);
+  let cleanup = noop;
+  const stopWatch = isSupported.value ? watch(
+    () => ({
+      el: unrefElement(target),
+      root: unrefElement(root)
+    }),
+    ({ el, root: root2 }) => {
+      cleanup();
+      if (!el)
+        return;
+      const observer = new IntersectionObserver(
+        callback,
+        {
+          root: root2,
+          rootMargin,
+          threshold
+        }
+      );
+      observer.observe(el);
+      cleanup = () => {
+        observer.disconnect();
+        cleanup = noop;
+      };
+    },
+    { immediate: true, flush: "post" }
+  ) : noop;
+  const stop = () => {
+    cleanup();
+    stopWatch();
+  };
+  tryOnScopeDispose(stop);
+  return {
+    isSupported,
+    stop
+  };
+}
+
 function useElementVisibility(element, { window = defaultWindow, scrollTarget } = {}) {
   const elementIsVisible = ref(false);
-  const testBounding = () => {
-    if (!window)
-      return;
-    const document = window.document;
-    const el = unrefElement(element);
-    if (!el) {
-      elementIsVisible.value = false;
-    } else {
-      const rect = el.getBoundingClientRect();
-      elementIsVisible.value = rect.top <= (window.innerHeight || document.documentElement.clientHeight) && rect.left <= (window.innerWidth || document.documentElement.clientWidth) && rect.bottom >= 0 && rect.right >= 0;
+  useIntersectionObserver(
+    element,
+    ([{ isIntersecting }]) => {
+      elementIsVisible.value = isIntersecting;
+    },
+    {
+      root: scrollTarget,
+      window
     }
-  };
-  watch(() => unrefElement(element), () => testBounding(), { immediate: true, flush: "post" });
-  if (window) {
-    useEventListener(scrollTarget || window, "scroll", testBounding, {
-      capture: false,
-      passive: true
-    });
-  }
+  );
   return elementIsVisible;
 }
 
@@ -1081,13 +1177,21 @@ async function loadImage(options) {
     img.onerror = reject;
   });
 }
-const useImage = (options, asyncStateOptions = {}) => {
-  const state = useAsyncState(() => loadImage(resolveUnref(options)), void 0, __spreadValues$9({
-    resetOnExecute: true
-  }, asyncStateOptions));
-  watch(() => resolveUnref(options), () => state.execute(asyncStateOptions.delay), { deep: true });
+function useImage(options, asyncStateOptions = {}) {
+  const state = useAsyncState(
+    () => loadImage(resolveUnref(options)),
+    void 0,
+    __spreadValues$9({
+      resetOnExecute: true
+    }, asyncStateOptions)
+  );
+  watch(
+    () => resolveUnref(options),
+    () => state.execute(asyncStateOptions.delay),
+    { deep: true }
+  );
   return state;
-};
+}
 
 const UseImage = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
   name: "UseImage",
@@ -1203,8 +1307,18 @@ function useScroll(element, options = {}) {
     onScrollEndDebounced(e);
     onScroll(e);
   };
-  useEventListener(element, "scroll", throttle ? useThrottleFn(onScrollHandler, throttle, true, false) : onScrollHandler, eventListenerOptions);
-  useEventListener(element, "scrollend", onScrollEnd, eventListenerOptions);
+  useEventListener(
+    element,
+    "scroll",
+    throttle ? useThrottleFn(onScrollHandler, throttle, true, false) : onScrollHandler,
+    eventListenerOptions
+  );
+  useEventListener(
+    element,
+    "scrollend",
+    onScrollEnd,
+    eventListenerOptions
+  );
   return {
     x,
     y,
@@ -1236,30 +1350,36 @@ var __spreadProps$7 = (a, b) => __defProps$7(a, __getOwnPropDescs$7(b));
 function useInfiniteScroll(element, onLoadMore, options = {}) {
   var _a, _b;
   const direction = (_a = options.direction) != null ? _a : "bottom";
-  const state = reactive(useScroll(element, __spreadProps$7(__spreadValues$8({}, options), {
-    offset: __spreadValues$8({
-      [direction]: (_b = options.distance) != null ? _b : 0
-    }, options.offset)
-  })));
-  watch(() => state.arrivedState[direction], async (v) => {
-    var _a2, _b2;
-    if (v) {
-      const elem = resolveUnref(element);
-      const previous = {
-        height: (_a2 = elem == null ? void 0 : elem.scrollHeight) != null ? _a2 : 0,
-        width: (_b2 = elem == null ? void 0 : elem.scrollWidth) != null ? _b2 : 0
-      };
-      await onLoadMore(state);
-      if (options.preserveScrollPosition && elem) {
-        nextTick(() => {
-          elem.scrollTo({
-            top: elem.scrollHeight - previous.height,
-            left: elem.scrollWidth - previous.width
+  const state = reactive(useScroll(
+    element,
+    __spreadProps$7(__spreadValues$8({}, options), {
+      offset: __spreadValues$8({
+        [direction]: (_b = options.distance) != null ? _b : 0
+      }, options.offset)
+    })
+  ));
+  watch(
+    () => state.arrivedState[direction],
+    async (v) => {
+      var _a2, _b2;
+      if (v) {
+        const elem = resolveUnref(element);
+        const previous = {
+          height: (_a2 = elem == null ? void 0 : elem.scrollHeight) != null ? _a2 : 0,
+          width: (_b2 = elem == null ? void 0 : elem.scrollWidth) != null ? _b2 : 0
+        };
+        await onLoadMore(state);
+        if (options.preserveScrollPosition && elem) {
+          nextTick(() => {
+            elem.scrollTo({
+              top: elem.scrollHeight - previous.height,
+              left: elem.scrollWidth - previous.width
+            });
           });
-        });
+        }
       }
     }
-  });
+  );
 }
 
 const vInfiniteScroll = {
@@ -1271,44 +1391,6 @@ const vInfiniteScroll = {
   }
 };
 
-function useIntersectionObserver(target, callback, options = {}) {
-  const {
-    root,
-    rootMargin = "0px",
-    threshold = 0.1,
-    window = defaultWindow
-  } = options;
-  const isSupported = useSupported(() => window && "IntersectionObserver" in window);
-  let cleanup = noop;
-  const stopWatch = isSupported.value ? watch(() => ({
-    el: unrefElement(target),
-    root: unrefElement(root)
-  }), ({ el, root: root2 }) => {
-    cleanup();
-    if (!el)
-      return;
-    const observer = new IntersectionObserver(callback, {
-      root: root2,
-      rootMargin,
-      threshold
-    });
-    observer.observe(el);
-    cleanup = () => {
-      observer.disconnect();
-      cleanup = noop;
-    };
-  }, { immediate: true, flush: "post" }) : noop;
-  const stop = () => {
-    cleanup();
-    stopWatch();
-  };
-  tryOnScopeDispose(stop);
-  return {
-    isSupported,
-    stop
-  };
-}
-
 const vIntersectionObserver = {
   [directiveHooks.mounted](el, binding) {
     if (typeof binding.value === "function")
@@ -1655,12 +1737,19 @@ function useCssVar(prop, target, options = {}) {
       window
     });
   }
-  watch([elRef, () => resolveUnref(prop)], updateCssVar, { immediate: true });
-  watch(variable, (val) => {
-    var _a;
-    if ((_a = elRef.value) == null ? void 0 : _a.style)
-      elRef.value.style.setProperty(resolveUnref(prop), val);
-  });
+  watch(
+    [elRef, () => resolveUnref(prop)],
+    updateCssVar,
+    { immediate: true }
+  );
+  watch(
+    variable,
+    (val) => {
+      var _a;
+      if ((_a = elRef.value) == null ? void 0 : _a.style)
+        elRef.value.style.setProperty(resolveUnref(prop), val);
+    }
+  );
   return variable;
 }
 
@@ -1827,9 +1916,14 @@ function useScrollLock(element, initialState = false) {
     if (!ele || isLocked.value)
       return;
     if (isIOS) {
-      stopTouchMoveListener = useEventListener(ele, "touchmove", (e) => {
-        preventDefault(e);
-      }, { passive: false });
+      stopTouchMoveListener = useEventListener(
+        ele,
+        "touchmove",
+        (e) => {
+          preventDefault(e);
+        },
+        { passive: false }
+      );
     }
     ele.style.overflow = "hidden";
     isLocked.value = true;
@@ -1856,7 +1950,7 @@ function useScrollLock(element, initialState = false) {
   });
 }
 
-const onScrollLock = () => {
+function onScrollLock() {
   let isMounted = false;
   const state = ref(false);
   return (el, binding) => {
@@ -1867,7 +1961,7 @@ const onScrollLock = () => {
     const isLocked = useScrollLock(el, binding.value);
     watch(state, (v) => isLocked.value = v);
   };
-};
+}
 const vScrollLock = onScrollLock();
 
 var __defProp$2 = Object.defineProperty;
@@ -1960,9 +2054,21 @@ const UseVirtualList = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
     const { list, containerProps, wrapperProps, scrollTo } = useVirtualList(listRef, props.options);
     expose({ scrollTo });
     typeof containerProps.style === "object" && !Array.isArray(containerProps.style) && (containerProps.style.height = props.height || "300px");
-    return () => h("div", __spreadValues({}, containerProps), [
-      h("div", __spreadValues({}, wrapperProps.value), list.value.map((item) => h("div", { style: { overFlow: "hidden", height: item.height } }, slots.default ? slots.default(item) : "Please set content!")))
-    ]);
+    return () => h(
+      "div",
+      __spreadValues({}, containerProps),
+      [
+        h(
+          "div",
+          __spreadValues({}, wrapperProps.value),
+          list.value.map((item) => h(
+            "div",
+            { style: { overFlow: "hidden", height: item.height } },
+            slots.default ? slots.default(item) : "Please set content!"
+          ))
+        )
+      ]
+    );
   }
 });
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vueuse/components",
-  "version": "10.0.0-beta.1",
+  "version": "10.0.0-beta.3",
   "description": "Renderless components for VueUse",
   "author": "Jacob Clevenger<https://github.com/wheatjs>",
   "license": "MIT",
@@ -33,8 +33,8 @@
   "jsdelivr": "./index.iife.min.js",
   "types": "./index.d.ts",
   "dependencies": {
-    "@vueuse/core": "10.0.0-beta.1",
-    "@vueuse/shared": "10.0.0-beta.1",
+    "@vueuse/core": "10.0.0-beta.3",
+    "@vueuse/shared": "10.0.0-beta.3",
     "vue-demi": "*"
   }
 }