@vueuse/components 11.3.0 → 12.0.0

package/index.iife.js

@@ -1,145 +1,18 @@
-var _VueDemiGlobal = typeof globalThis !== 'undefined' 
-  ? globalThis
-  : typeof global !== 'undefined'
-    ? global
-    : typeof self !== 'undefined'
-      ? self
-      : this
-var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
-  if (VueDemi.install) {
-    return VueDemi
-  }
-  if (!Vue) {
-    console.error('[vue-demi] no Vue instance found, please be sure to import `vue` before `vue-demi`.')
-    return VueDemi
-  }
-
-  // Vue 2.7
-  if (Vue.version.slice(0, 4) === '2.7.') {
-    for (var key in Vue) {
-      VueDemi[key] = Vue[key]
-    }
-    VueDemi.isVue2 = true
-    VueDemi.isVue3 = false
-    VueDemi.install = function () {}
-    VueDemi.Vue = Vue
-    VueDemi.Vue2 = Vue
-    VueDemi.version = Vue.version
-    VueDemi.warn = Vue.util.warn
-    VueDemi.hasInjectionContext = function() {
-      return !!VueDemi.getCurrentInstance()
-    }
-    function createApp(rootComponent, rootProps) {
-      var vm
-      var provide = {}
-      var app = {
-        config: Vue.config,
-        use: Vue.use.bind(Vue),
-        mixin: Vue.mixin.bind(Vue),
-        component: Vue.component.bind(Vue),
-        provide: function (key, value) {
-          provide[key] = value
-          return this
-        },
-        directive: function (name, dir) {
-          if (dir) {
-            Vue.directive(name, dir)
-            return app
-          } else {
-            return Vue.directive(name)
-          }
-        },
-        mount: function (el, hydrating) {
-          if (!vm) {
-            vm = new Vue(Object.assign({ propsData: rootProps }, rootComponent, { provide: Object.assign(provide, rootComponent.provide) }))
-            vm.$mount(el, hydrating)
-            return vm
-          } else {
-            return vm
-          }
-        },
-        unmount: function () {
-          if (vm) {
-            vm.$destroy()
-            vm = undefined
-          }
-        },
-      }
-      return app
-    }
-    VueDemi.createApp = createApp
-  }
-  // Vue 2.6.x
-  else if (Vue.version.slice(0, 2) === '2.') {
-    if (VueCompositionAPI) {
-      for (var key in VueCompositionAPI) {
-        VueDemi[key] = VueCompositionAPI[key]
-      }
-      VueDemi.isVue2 = true
-      VueDemi.isVue3 = false
-      VueDemi.install = function () {}
-      VueDemi.Vue = Vue
-      VueDemi.Vue2 = Vue
-      VueDemi.version = Vue.version
-      VueDemi.hasInjectionContext = function() {
-        return !!VueDemi.getCurrentInstance()
-      }
-    } else {
-      console.error('[vue-demi] no VueCompositionAPI instance found, please be sure to import `@vue/composition-api` before `vue-demi`.')
-    }
-  }
-  // Vue 3
-  else if (Vue.version.slice(0, 2) === '3.') {
-    for (var key in Vue) {
-      VueDemi[key] = Vue[key]
-    }
-    VueDemi.isVue2 = false
-    VueDemi.isVue3 = true
-    VueDemi.install = function () {}
-    VueDemi.Vue = Vue
-    VueDemi.Vue2 = undefined
-    VueDemi.version = Vue.version
-    VueDemi.set = function (target, key, val) {
-      if (Array.isArray(target)) {
-        target.length = Math.max(target.length, key)
-        target.splice(key, 1, val)
-        return val
-      }
-      target[key] = val
-      return val
-    }
-    VueDemi.del = function (target, key) {
-      if (Array.isArray(target)) {
-        target.splice(key, 1)
-        return
-      }
-      delete target[key]
-    }
-  } else {
-    console.error('[vue-demi] Vue version ' + Vue.version + ' is unsupported.')
-  }
-  return VueDemi
-})(
-  (_VueDemiGlobal.VueDemi = _VueDemiGlobal.VueDemi || (typeof VueDemi !== 'undefined' ? VueDemi : {})),
-  _VueDemiGlobal.Vue || (typeof Vue !== 'undefined' ? Vue : undefined),
-  _VueDemiGlobal.VueCompositionAPI || (typeof VueCompositionAPI !== 'undefined' ? VueCompositionAPI : undefined)
-);
-;
-;(function (exports, core, vueDemi, shared) {
+(function (exports, core, vue, shared) {
   'use strict';
 
-  const OnClickOutside = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
+  const OnClickOutside = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
     name: "OnClickOutside",
     props: ["as", "options"],
     emits: ["trigger"],
     setup(props, { slots, emit }) {
-      const target = vueDemi.ref();
+      const target = vue.ref();
       core.onClickOutside(target, (e) => {
         emit("trigger", e);
       }, props.options);
       return () => {
         if (slots.default)
-          return vueDemi.h(props.as || "div", { ref: target }, slots.default());
+          return vue.h(props.as || "div", { ref: target }, slots.default());
       };
     }
   });
@@ -178,7 +51,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
       el.addEventListener(event, listener, options2);
       return () => el.removeEventListener(event, listener, options2);
     };
-    const stopWatch = vueDemi.watch(
+    const stopWatch = vue.watch(
       () => [unrefElement(target), shared.toValue(options)],
       ([el, options2]) => {
         cleanup();
@@ -279,7 +152,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
   }
 
   const vOnClickOutside = {
-    [shared.directiveHooks.mounted](el, binding) {
+    mounted(el, binding) {
       const capture = !binding.modifiers.bubble;
       if (typeof binding.value === "function") {
         el.__onClickOutside_stop = onClickOutside(el, binding.value, { capture });
@@ -288,7 +161,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
         el.__onClickOutside_stop = onClickOutside(el, handler, Object.assign({ capture }, options));
       }
     },
-    [shared.directiveHooks.unmounted](el) {
+    unmounted(el) {
       el.__onClickOutside_stop();
     }
   };
@@ -340,7 +213,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
   }
 
   const vOnKeyStroke = {
-    [shared.directiveHooks.mounted](el, binding) {
+    mounted(el, binding) {
       var _a, _b;
       const keys = (_b = (_a = binding.arg) == null ? void 0 : _a.split(",")) != null ? _b : true;
       if (typeof binding.value === "function") {
@@ -361,7 +234,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
   const DEFAULT_THRESHOLD = 10;
   function onLongPress(target, handler, options) {
     var _a, _b;
-    const elementRef = vueDemi.computed(() => unrefElement(target));
+    const elementRef = vue.computed(() => unrefElement(target));
     let timeout;
     let posStart;
     let startTimestamp;
@@ -443,12 +316,12 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     return stop;
   }
 
-  const OnLongPress = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
+  const OnLongPress = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
     name: "OnLongPress",
     props: ["as", "options"],
     emits: ["trigger"],
     setup(props, { slots, emit }) {
-      const target = vueDemi.ref();
+      const target = vue.ref();
       onLongPress(
         target,
         (e) => {
@@ -458,13 +331,13 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
       );
       return () => {
         if (slots.default)
-          return vueDemi.h(props.as || "div", { ref: target }, slots.default());
+          return vue.h(props.as || "div", { ref: target }, slots.default());
       };
     }
   });
 
   const vOnLongPress = {
-    [shared.directiveHooks.mounted](el, binding) {
+    mounted(el, binding) {
       if (typeof binding.value === "function")
         onLongPress(el, binding.value, { modifiers: binding.modifiers });
       else
@@ -472,10 +345,10 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     }
   };
 
-  const UseActiveElement = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
+  const UseActiveElement = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
     name: "UseActiveElement",
     setup(props, { slots }) {
-      const data = vueDemi.reactive({
+      const data = vue.reactive({
         element: core.useActiveElement()
       });
       return () => {
@@ -485,10 +358,10 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     }
   });
 
-  const UseBattery = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
+  const UseBattery = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
     name: "UseBattery",
     setup(props, { slots }) {
-      const data = vueDemi.reactive(core.useBattery(props));
+      const data = vue.reactive(core.useBattery(props));
       return () => {
         if (slots.default)
           return slots.default(data);
@@ -496,10 +369,10 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     }
   });
 
-  const UseBrowserLocation = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
+  const UseBrowserLocation = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
     name: "UseBrowserLocation",
     setup(props, { slots }) {
-      const data = vueDemi.reactive(core.useBrowserLocation());
+      const data = vue.reactive(core.useBrowserLocation());
       return () => {
         if (slots.default)
           return slots.default(data);
@@ -507,7 +380,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     }
   });
 
-  const UseClipboard = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
+  const UseClipboard = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
     name: "UseClipboard",
     props: [
       "source",
@@ -517,7 +390,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
       "legacy"
     ],
     setup(props, { slots }) {
-      const data = vueDemi.reactive(core.useClipboard(props));
+      const data = vue.reactive(core.useClipboard(props));
       return () => {
         var _a;
         return (_a = slots.default) == null ? void 0 : _a.call(slots, data);
@@ -538,19 +411,19 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
   }
 
   function useMounted() {
-    const isMounted = vueDemi.ref(false);
-    const instance = vueDemi.getCurrentInstance();
+    const isMounted = vue.ref(false);
+    const instance = vue.getCurrentInstance();
     if (instance) {
-      vueDemi.onMounted(() => {
+      vue.onMounted(() => {
         isMounted.value = true;
-      }, vueDemi.isVue2 ? void 0 : instance);
+      }, instance);
     }
     return isMounted;
   }
 
   function useSupported(callback) {
     const isMounted = useMounted();
-    return vueDemi.computed(() => {
+    return vue.computed(() => {
       isMounted.value;
       return Boolean(callback());
     });
@@ -560,7 +433,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     const { window = defaultWindow } = options;
     const isSupported = useSupported(() => window && "matchMedia" in window && typeof window.matchMedia === "function");
     let mediaQuery;
-    const matches = vueDemi.ref(false);
+    const matches = vue.ref(false);
     const handler = (event) => {
       matches.value = event.matches;
     };
@@ -572,7 +445,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
       else
         mediaQuery.removeListener(handler);
     };
-    const stopWatch = vueDemi.watchEffect(() => {
+    const stopWatch = vue.watchEffect(() => {
       if (!isSupported.value)
         return;
       cleanup();
@@ -650,7 +523,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
       },
       initOnMounted
     } = options;
-    const data = (shallow ? vueDemi.shallowRef : vueDemi.ref)(typeof defaults === "function" ? defaults() : defaults);
+    const data = (shallow ? vue.shallowRef : vue.ref)(typeof defaults === "function" ? defaults() : defaults);
     if (!storage) {
       try {
         storage = getSSRHandler("getDefaultStorage", () => {
@@ -749,7 +622,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
         onError(e);
       } finally {
         if (event)
-          vueDemi.nextTick(resumeWatch);
+          vue.nextTick(resumeWatch);
         else
           resumeWatch();
       }
@@ -781,9 +654,9 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
       ...options.modes || {}
     };
     const preferredDark = usePreferredDark({ window });
-    const system = vueDemi.computed(() => preferredDark.value ? "dark" : "light");
+    const system = vue.computed(() => preferredDark.value ? "dark" : "light");
     const store = storageRef || (storageKey == null ? shared.toRef(initialValue) : useStorage(storageKey, initialValue, storage, { window, listenToStorageChanges }));
-    const state = vueDemi.computed(() => store.value === "auto" ? system.value : store.value);
+    const state = vue.computed(() => store.value === "auto" ? system.value : store.value);
     const updateHTMLAttrs = getSSRHandler(
       "updateHTMLAttrs",
       (selector2, attribute2, value) => {
@@ -837,9 +710,9 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
       else
         defaultOnChanged(mode);
     }
-    vueDemi.watch(state, onChanged, { flush: "post", immediate: true });
+    vue.watch(state, onChanged, { flush: "post", immediate: true });
     shared.tryOnMounted(() => onChanged(state.value));
-    const auto = vueDemi.computed({
+    const auto = vue.computed({
       get() {
         return emitAuto ? store.value : state.value;
       },
@@ -847,19 +720,15 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
         store.value = v;
       }
     });
-    try {
-      return Object.assign(auto, { store, system, state });
-    } catch (e) {
-      return auto;
-    }
+    return Object.assign(auto, { store, system, state });
   }
 
-  const UseColorMode = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
+  const UseColorMode = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
     name: "UseColorMode",
     props: ["selector", "attribute", "modes", "onChanged", "storageKey", "storage", "emitAuto"],
     setup(props, { slots }) {
       const mode = useColorMode(props);
-      const data = vueDemi.reactive({
+      const data = vue.reactive({
         mode,
         system: mode.system,
         store: mode.store
@@ -871,12 +740,12 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     }
   });
 
-  const UseDark = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
+  const UseDark = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
     name: "UseDark",
     props: ["selector", "attribute", "valueDark", "valueLight", "onChanged", "storageKey", "storage"],
     setup(props, { slots }) {
       const isDark = core.useDark(props);
-      const data = vueDemi.reactive({
+      const data = vue.reactive({
         isDark,
         toggleDark: shared.useToggle(isDark)
       });
@@ -887,10 +756,10 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     }
   });
 
-  const UseDeviceMotion = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
+  const UseDeviceMotion = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
     name: "UseDeviceMotion",
     setup(props, { slots }) {
-      const data = vueDemi.reactive(core.useDeviceMotion());
+      const data = vue.reactive(core.useDeviceMotion());
       return () => {
         if (slots.default)
           return slots.default(data);
@@ -898,10 +767,10 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     }
   });
 
-  const UseDeviceOrientation = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
+  const UseDeviceOrientation = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
     name: "UseDeviceOrientation",
     setup(props, { slots }) {
-      const data = vueDemi.reactive(core.useDeviceOrientation());
+      const data = vue.reactive(core.useDeviceOrientation());
       return () => {
         if (slots.default)
           return slots.default(data);
@@ -909,10 +778,10 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     }
   });
 
-  const UseDevicePixelRatio = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
+  const UseDevicePixelRatio = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
     name: "UseDevicePixelRatio",
     setup(props, { slots }) {
-      const data = vueDemi.reactive({
+      const data = vue.reactive({
         pixelRatio: core.useDevicePixelRatio()
       });
       return () => {
@@ -922,11 +791,11 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     }
   });
 
-  const UseDevicesList = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
+  const UseDevicesList = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
     name: "UseDevicesList",
     props: ["onUpdated", "requestPermissions", "constraints"],
     setup(props, { slots }) {
-      const data = vueDemi.reactive(core.useDevicesList(props));
+      const data = vue.reactive(core.useDevicesList(props));
       return () => {
         if (slots.default)
           return slots.default(data);
@@ -934,10 +803,10 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     }
   });
 
-  const UseDocumentVisibility = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
+  const UseDocumentVisibility = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
     name: "UseDocumentVisibility",
     setup(props, { slots }) {
-      const data = vueDemi.reactive({
+      const data = vue.reactive({
         visibility: core.useDocumentVisibility()
       });
       return () => {
@@ -947,7 +816,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     }
   });
 
-  const UseDraggable = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
+  const UseDraggable = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
     name: "UseDraggable",
     props: [
       "storageKey",
@@ -968,16 +837,16 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
       "containerElement"
     ],
     setup(props, { slots }) {
-      const target = vueDemi.ref();
-      const handle = vueDemi.computed(() => {
+      const target = vue.ref();
+      const handle = vue.computed(() => {
         var _a;
         return (_a = props.handle) != null ? _a : target.value;
       });
-      const containerElement = vueDemi.computed(() => {
+      const containerElement = vue.computed(() => {
         var _a;
         return (_a = props.containerElement) != null ? _a : void 0;
       });
-      const disabled = vueDemi.computed(() => !!props.disabled);
+      const disabled = vue.computed(() => !!props.disabled);
       const storageValue = props.storageKey && core.useStorage(
         props.storageKey,
         shared.toValue(props.initialValue) || { x: 0, y: 0 },
@@ -992,7 +861,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
         storageValue.value.x = position.x;
         storageValue.value.y = position.y;
       };
-      const data = vueDemi.reactive(core.useDraggable(target, {
+      const data = vue.reactive(core.useDraggable(target, {
         ...props,
         handle,
         initialValue,
@@ -1002,20 +871,20 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
       }));
       return () => {
         if (slots.default)
-          return vueDemi.h(props.as || "div", { ref: target, style: `touch-action:none;${data.style}` }, slots.default(data));
+          return vue.h(props.as || "div", { ref: target, style: `touch-action:none;${data.style}` }, slots.default(data));
       };
     }
   });
 
-  const UseElementBounding = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
+  const UseElementBounding = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
     name: "UseElementBounding",
     props: ["box", "as"],
     setup(props, { slots }) {
-      const target = vueDemi.ref();
-      const data = vueDemi.reactive(core.useElementBounding(target));
+      const target = vue.ref();
+      const data = vue.reactive(core.useElementBounding(target));
       return () => {
         if (slots.default)
-          return vueDemi.h(props.as || "div", { ref: target }, slots.default(data));
+          return vue.h(props.as || "div", { ref: target }, slots.default(data));
       };
     }
   });
@@ -1026,7 +895,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
       delayLeave = 0,
       window = defaultWindow
     } = options;
-    const isHovered = vueDemi.ref(false);
+    const isHovered = vue.ref(false);
     let timer;
     const toggle = (entering) => {
       const delay = entering ? delayEnter : delayLeave;
@@ -1047,28 +916,28 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
   }
 
   const vElementHover = {
-    [shared.directiveHooks.mounted](el, binding) {
+    mounted(el, binding) {
       const value = binding.value;
       if (typeof value === "function") {
         const isHovered = useElementHover(el);
-        vueDemi.watch(isHovered, (v) => value(v));
+        vue.watch(isHovered, (v) => value(v));
       } else {
         const [handler, options] = value;
         const isHovered = useElementHover(el, options);
-        vueDemi.watch(isHovered, (v) => handler(v));
+        vue.watch(isHovered, (v) => handler(v));
       }
     }
   };
 
-  const UseElementSize = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
+  const UseElementSize = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
     name: "UseElementSize",
     props: ["width", "height", "box", "as"],
     setup(props, { slots }) {
-      const target = vueDemi.ref();
-      const data = vueDemi.reactive(core.useElementSize(target, { width: props.width, height: props.height }, { box: props.box }));
+      const target = vue.ref();
+      const data = vue.reactive(core.useElementSize(target, { width: props.width, height: props.height }, { box: props.box }));
       return () => {
         if (slots.default)
-          return vueDemi.h(props.as || "div", { ref: target }, slots.default(data));
+          return vue.h(props.as || "div", { ref: target }, slots.default(data));
       };
     }
   });
@@ -1083,11 +952,11 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
         observer = void 0;
       }
     };
-    const targets = vueDemi.computed(() => {
+    const targets = vue.computed(() => {
       const _targets = shared.toValue(target);
       return Array.isArray(_targets) ? _targets.map((el) => unrefElement(el)) : [unrefElement(_targets)];
     });
-    const stopWatch = vueDemi.watch(
+    const stopWatch = vue.watch(
       targets,
       (els) => {
         cleanup();
@@ -1114,12 +983,12 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
 
   function useElementSize(target, initialSize = { width: 0, height: 0 }, options = {}) {
     const { window = defaultWindow, box = "content-box" } = options;
-    const isSVG = vueDemi.computed(() => {
+    const isSVG = vue.computed(() => {
       var _a, _b;
       return (_b = (_a = unrefElement(target)) == null ? void 0 : _a.namespaceURI) == null ? void 0 : _b.includes("svg");
     });
-    const width = vueDemi.ref(initialSize.width);
-    const height = vueDemi.ref(initialSize.height);
+    const width = vue.ref(initialSize.width);
+    const height = vue.ref(initialSize.height);
     const { stop: stop1 } = useResizeObserver(
       target,
       ([entry]) => {
@@ -1151,7 +1020,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
         height.value = "offsetHeight" in ele ? ele.offsetHeight : initialSize.height;
       }
     });
-    const stop2 = vueDemi.watch(
+    const stop2 = vue.watch(
       () => unrefElement(target),
       (ele) => {
         width.value = ele ? initialSize.width : 0;
@@ -1170,26 +1039,26 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
   }
 
   const vElementSize = {
-    [shared.directiveHooks.mounted](el, binding) {
+    mounted(el, binding) {
       var _a;
       const handler = typeof binding.value === "function" ? binding.value : (_a = binding.value) == null ? void 0 : _a[0];
       const options = typeof binding.value === "function" ? [] : binding.value.slice(1);
       const { width, height } = useElementSize(el, ...options);
-      vueDemi.watch([width, height], ([width2, height2]) => handler({ width: width2, height: height2 }));
+      vue.watch([width, height], ([width2, height2]) => handler({ width: width2, height: height2 }));
     }
   };
 
-  const UseElementVisibility = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
+  const UseElementVisibility = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
     name: "UseElementVisibility",
     props: ["as"],
     setup(props, { slots }) {
-      const target = vueDemi.ref();
-      const data = vueDemi.reactive({
+      const target = vue.ref();
+      const data = vue.reactive({
         isVisible: core.useElementVisibility(target)
       });
       return () => {
         if (slots.default)
-          return vueDemi.h(props.as || "div", { ref: target }, slots.default(data));
+          return vue.h(props.as || "div", { ref: target }, slots.default(data));
       };
     }
   });
@@ -1203,13 +1072,13 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
       immediate = true
     } = options;
     const isSupported = useSupported(() => window && "IntersectionObserver" in window);
-    const targets = vueDemi.computed(() => {
+    const targets = vue.computed(() => {
       const _target = shared.toValue(target);
       return (Array.isArray(_target) ? _target : [_target]).map(unrefElement).filter(shared.notNullish);
     });
     let cleanup = shared.noop;
-    const isActive = vueDemi.ref(immediate);
-    const stopWatch = isSupported.value ? vueDemi.watch(
+    const isActive = vue.ref(immediate);
+    const stopWatch = isSupported.value ? vue.watch(
       () => [targets.value, unrefElement(root), isActive.value],
       ([targets2, root2]) => {
         cleanup();
@@ -1255,7 +1124,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
 
   function useElementVisibility(element, options = {}) {
     const { window = defaultWindow, scrollTarget, threshold = 0 } = options;
-    const elementIsVisible = vueDemi.ref(false);
+    const elementIsVisible = vue.ref(false);
     useIntersectionObserver(
       element,
       (intersectionObserverEntries) => {
@@ -1279,26 +1148,26 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
   }
 
   const vElementVisibility = {
-    [shared.directiveHooks.mounted](el, binding) {
+    mounted(el, binding) {
       if (typeof binding.value === "function") {
         const handler = binding.value;
         const isVisible = useElementVisibility(el);
-        vueDemi.watch(isVisible, (v) => handler(v), { immediate: true });
+        vue.watch(isVisible, (v) => handler(v), { immediate: true });
       } else {
         const [handler, options] = binding.value;
         const isVisible = useElementVisibility(el, options);
-        vueDemi.watch(isVisible, (v) => handler(v), { immediate: true });
+        vue.watch(isVisible, (v) => handler(v), { immediate: true });
       }
     }
   };
 
-  const UseEyeDropper = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
+  const UseEyeDropper = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
     name: "UseEyeDropper",
     props: {
       sRGBHex: String
     },
     setup(props, { slots }) {
-      const data = vueDemi.reactive(core.useEyeDropper());
+      const data = vue.reactive(core.useEyeDropper());
       return () => {
         if (slots.default)
           return slots.default(data);
@@ -1306,24 +1175,24 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     }
   });
 
-  const UseFullscreen = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
+  const UseFullscreen = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
     name: "UseFullscreen",
     props: ["as"],
     setup(props, { slots }) {
-      const target = vueDemi.ref();
-      const data = vueDemi.reactive(core.useFullscreen(target));
+      const target = vue.ref();
+      const data = vue.reactive(core.useFullscreen(target));
       return () => {
         if (slots.default)
-          return vueDemi.h(props.as || "div", { ref: target }, slots.default(data));
+          return vue.h(props.as || "div", { ref: target }, slots.default(data));
       };
     }
   });
 
-  const UseGeolocation = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
+  const UseGeolocation = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
     name: "UseGeolocation",
     props: ["enableHighAccuracy", "maximumAge", "timeout", "navigator"],
     setup(props, { slots }) {
-      const data = vueDemi.reactive(core.useGeolocation(props));
+      const data = vue.reactive(core.useGeolocation(props));
       return () => {
         if (slots.default)
           return slots.default(data);
@@ -1331,11 +1200,11 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     }
   });
 
-  const UseIdle = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
+  const UseIdle = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
     name: "UseIdle",
     props: ["timeout", "events", "listenForVisibilityChange", "initialState"],
     setup(props, { slots }) {
-      const data = vueDemi.reactive(core.useIdle(props.timeout, props));
+      const data = vue.reactive(core.useIdle(props.timeout, props));
       return () => {
         if (slots.default)
           return slots.default(data);
@@ -1353,10 +1222,10 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
       shallow = true,
       throwError
     } = options != null ? options : {};
-    const state = shallow ? vueDemi.shallowRef(initialState) : vueDemi.ref(initialState);
-    const isReady = vueDemi.ref(false);
-    const isLoading = vueDemi.ref(false);
-    const error = vueDemi.shallowRef(void 0);
+    const state = shallow ? vue.shallowRef(initialState) : vue.ref(initialState);
+    const isReady = vue.ref(false);
+    const isLoading = vue.ref(false);
+    const error = vue.shallowRef(void 0);
     async function execute(delay2 = 0, ...args) {
       if (resetOnExecute)
         state.value = initialState;
@@ -1433,7 +1302,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
         ...asyncStateOptions
       }
     );
-    vueDemi.watch(
+    vue.watch(
       () => shared.toValue(options),
       () => state.execute(asyncStateOptions.delay),
       { deep: true }
@@ -1441,7 +1310,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     return state;
   }
 
-  const UseImage = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
+  const UseImage = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
     name: "UseImage",
     props: [
       "src",
@@ -1455,7 +1324,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
       "referrerPolicy"
     ],
     setup(props, { slots }) {
-      const data = vueDemi.reactive(useImage(props));
+      const data = vue.reactive(useImage(props));
       return () => {
         if (data.isLoading && slots.loading)
           return slots.loading(data);
@@ -1463,7 +1332,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
           return slots.error(data.error);
         if (slots.default)
           return slots.default(data);
-        return vueDemi.h(props.as || "img", props);
+        return vue.h(props.as || "img", props);
       };
     }
   });
@@ -1499,9 +1368,9 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
         console.error(e);
       }
     } = options;
-    const internalX = vueDemi.ref(0);
-    const internalY = vueDemi.ref(0);
-    const x = vueDemi.computed({
+    const internalX = vue.ref(0);
+    const internalY = vue.ref(0);
+    const x = vue.computed({
       get() {
         return internalX.value;
       },
@@ -1509,7 +1378,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
         scrollTo(x2, void 0);
       }
     });
-    const y = vueDemi.computed({
+    const y = vue.computed({
       get() {
         return internalY.value;
       },
@@ -1535,14 +1404,14 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
       if (y != null)
         internalY.value = scrollContainer.scrollTop;
     }
-    const isScrolling = vueDemi.ref(false);
-    const arrivedState = vueDemi.reactive({
+    const isScrolling = vue.ref(false);
+    const arrivedState = vue.reactive({
       left: true,
       right: false,
       top: true,
       bottom: false
     });
-    const directions = vueDemi.reactive({
+    const directions = vue.reactive({
       left: false,
       right: false,
       top: false,
@@ -1647,7 +1516,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
       interval = 100,
       canLoadMore = () => true
     } = options;
-    const state = vueDemi.reactive(useScroll(
+    const state = vue.reactive(useScroll(
       element,
       {
         ...options,
@@ -1657,9 +1526,9 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
         }
       }
     ));
-    const promise = vueDemi.ref();
-    const isLoading = vueDemi.computed(() => !!promise.value);
-    const observedElement = vueDemi.computed(() => {
+    const promise = vue.ref();
+    const isLoading = vue.computed(() => !!promise.value);
+    const observedElement = vue.computed(() => {
       return resolveElement(shared.toValue(element));
     });
     const isElementVisible = useElementVisibility(observedElement);
@@ -1676,12 +1545,12 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
             new Promise((resolve) => setTimeout(resolve, interval))
           ]).finally(() => {
             promise.value = null;
-            vueDemi.nextTick(() => checkAndLoad());
+            vue.nextTick(() => checkAndLoad());
           });
         }
       }
     }
-    const stop = vueDemi.watch(
+    const stop = vue.watch(
       () => [state.arrivedState[direction], isElementVisible.value],
       checkAndLoad,
       { immediate: true }
@@ -1690,13 +1559,13 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     return {
       isLoading,
       reset() {
-        vueDemi.nextTick(() => checkAndLoad());
+        vue.nextTick(() => checkAndLoad());
       }
     };
   }
 
   const vInfiniteScroll = {
-    [shared.directiveHooks.mounted](el, binding) {
+    mounted(el, binding) {
       if (typeof binding.value === "function")
         useInfiniteScroll(el, binding.value);
       else
@@ -1705,7 +1574,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
   };
 
   const vIntersectionObserver = {
-    [shared.directiveHooks.mounted](el, binding) {
+    mounted(el, binding) {
       if (typeof binding.value === "function")
         useIntersectionObserver(el, binding.value);
       else
@@ -1713,11 +1582,11 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     }
   };
 
-  const UseMouse = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
+  const UseMouse = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
     name: "UseMouse",
     props: ["touch", "resetOnTouchEnds", "initialValue"],
     setup(props, { slots }) {
-      const data = vueDemi.reactive(core.useMouse(props));
+      const data = vue.reactive(core.useMouse(props));
       return () => {
         if (slots.default)
           return slots.default(data);
@@ -1725,36 +1594,36 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     }
   });
 
-  const UseMouseInElement = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
+  const UseMouseInElement = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
     name: "UseMouseElement",
     props: ["handleOutside", "as"],
     setup(props, { slots }) {
-      const target = vueDemi.ref();
-      const data = vueDemi.reactive(core.useMouseInElement(target, props));
+      const target = vue.ref();
+      const data = vue.reactive(core.useMouseInElement(target, props));
       return () => {
         if (slots.default)
-          return vueDemi.h(props.as || "div", { ref: target }, slots.default(data));
+          return vue.h(props.as || "div", { ref: target }, slots.default(data));
       };
     }
   });
 
-  const UseMousePressed = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
+  const UseMousePressed = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
     name: "UseMousePressed",
     props: ["touch", "initialValue", "as"],
     setup(props, { slots }) {
-      const target = vueDemi.ref();
-      const data = vueDemi.reactive(core.useMousePressed({ ...props, target }));
+      const target = vue.ref();
+      const data = vue.reactive(core.useMousePressed({ ...props, target }));
       return () => {
         if (slots.default)
-          return vueDemi.h(props.as || "div", { ref: target }, slots.default(data));
+          return vue.h(props.as || "div", { ref: target }, slots.default(data));
       };
     }
   });
 
-  const UseNetwork = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
+  const UseNetwork = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
     name: "UseNetwork",
     setup(props, { slots }) {
-      const data = vueDemi.reactive(core.useNetwork());
+      const data = vue.reactive(core.useNetwork());
       return () => {
         if (slots.default)
           return slots.default(data);
@@ -1762,11 +1631,11 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     }
   });
 
-  const UseNow = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
+  const UseNow = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
     name: "UseNow",
     props: ["interval"],
     setup(props, { slots }) {
-      const data = vueDemi.reactive(core.useNow({ ...props, controls: true }));
+      const data = vue.reactive(core.useNow({ ...props, controls: true }));
       return () => {
         if (slots.default)
           return slots.default(data);
@@ -1774,7 +1643,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     }
   });
 
-  const UseObjectUrl = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
+  const UseObjectUrl = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
     name: "UseObjectUrl",
     props: [
       "object"
@@ -1789,7 +1658,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     }
   });
 
-  const UseOffsetPagination = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
+  const UseOffsetPagination = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
     name: "UseOffsetPagination",
     props: [
       "total",
@@ -1805,7 +1674,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
       "page-count-change"
     ],
     setup(props, { slots, emit }) {
-      const data = vueDemi.reactive(core.useOffsetPagination({
+      const data = vue.reactive(core.useOffsetPagination({
         ...props,
         onPageChange(...args) {
           var _a;
@@ -1830,10 +1699,10 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     }
   });
 
-  const UseOnline = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
+  const UseOnline = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
     name: "UseOnline",
     setup(props, { slots }) {
-      const data = vueDemi.reactive({
+      const data = vue.reactive({
         isOnline: core.useOnline()
       });
       return () => {
@@ -1843,10 +1712,10 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     }
   });
 
-  const UsePageLeave = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
+  const UsePageLeave = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
     name: "UsePageLeave",
     setup(props, { slots }) {
-      const data = vueDemi.reactive({
+      const data = vue.reactive({
         isLeft: core.usePageLeave()
       });
       return () => {
@@ -1856,7 +1725,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     }
   });
 
-  const UsePointer = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
+  const UsePointer = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
     name: "UsePointer",
     props: [
       "pointerTypes",
@@ -1864,8 +1733,8 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
       "target"
     ],
     setup(props, { slots }) {
-      const el = vueDemi.ref(null);
-      const data = vueDemi.reactive(core.usePointer({
+      const el = vue.ref(null);
+      const data = vue.reactive(core.usePointer({
         ...props,
         target: props.target === "self" ? el : defaultWindow
       }));
@@ -1876,23 +1745,23 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     }
   });
 
-  const UsePointerLock = /* #__PURE__ */ vueDemi.defineComponent({
+  const UsePointerLock = /* #__PURE__ */ vue.defineComponent({
     name: "UsePointerLock",
     props: ["as"],
     setup(props, { slots }) {
-      const target = vueDemi.ref();
-      const data = vueDemi.reactive(core.usePointerLock(target));
+      const target = vue.ref();
+      const data = vue.reactive(core.usePointerLock(target));
       return () => {
         if (slots.default)
-          return vueDemi.h(props.as || "div", { ref: target }, slots.default(data));
+          return vue.h(props.as || "div", { ref: target }, slots.default(data));
       };
     }
   });
 
-  const UsePreferredColorScheme = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
+  const UsePreferredColorScheme = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
     name: "UsePreferredColorScheme",
     setup(props, { slots }) {
-      const data = vueDemi.reactive({
+      const data = vue.reactive({
         colorScheme: core.usePreferredColorScheme()
       });
       return () => {
@@ -1902,10 +1771,10 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     }
   });
 
-  const UsePreferredContrast = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
+  const UsePreferredContrast = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
     name: "UsePreferredContrast",
     setup(props, { slots }) {
-      const data = vueDemi.reactive({
+      const data = vue.reactive({
         contrast: core.usePreferredContrast()
       });
       return () => {
@@ -1915,10 +1784,10 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     }
   });
 
-  const UsePreferredDark = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
+  const UsePreferredDark = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
     name: "UsePreferredDark",
     setup(props, { slots }) {
-      const data = vueDemi.reactive({
+      const data = vue.reactive({
         prefersDark: core.usePreferredDark()
       });
       return () => {
@@ -1928,10 +1797,10 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     }
   });
 
-  const UsePreferredLanguages = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
+  const UsePreferredLanguages = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
     name: "UsePreferredLanguages",
     setup(props, { slots }) {
-      const data = vueDemi.reactive({
+      const data = vue.reactive({
         languages: core.usePreferredLanguages()
       });
       return () => {
@@ -1941,10 +1810,10 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     }
   });
 
-  const UsePreferredReducedMotion = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
+  const UsePreferredReducedMotion = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
     name: "UsePreferredReducedMotion",
     setup(props, { slots }) {
-      const data = vueDemi.reactive({
+      const data = vue.reactive({
         motion: core.usePreferredReducedMotion()
       });
       return () => {
@@ -1955,7 +1824,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
   });
 
   const vResizeObserver = {
-    [shared.directiveHooks.mounted](el, binding) {
+    mounted(el, binding) {
       if (typeof binding.value === "function")
         useResizeObserver(el, binding.value);
       else
@@ -1973,12 +1842,12 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
         observer = void 0;
       }
     };
-    const targets = vueDemi.computed(() => {
+    const targets = vue.computed(() => {
       const value = shared.toValue(target);
       const items = (Array.isArray(value) ? value : [value]).map(unrefElement).filter(shared.notNullish);
       return new Set(items);
     });
-    const stopWatch = vueDemi.watch(
+    const stopWatch = vue.watch(
       () => targets.value,
       (targets2) => {
         cleanup();
@@ -2006,8 +1875,8 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
 
   function useCssVar(prop, target, options = {}) {
     const { window = defaultWindow, initialValue, observe = false } = options;
-    const variable = vueDemi.ref(initialValue);
-    const elRef = vueDemi.computed(() => {
+    const variable = vue.ref(initialValue);
+    const elRef = vue.computed(() => {
       var _a;
       return unrefElement(target) || ((_a = window == null ? void 0 : window.document) == null ? void 0 : _a.documentElement);
     });
@@ -2026,7 +1895,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
         window
       });
     }
-    vueDemi.watch(
+    vue.watch(
       [elRef, () => shared.toValue(prop)],
       (_, old) => {
         if (old[0] && old[1])
@@ -2035,7 +1904,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
       },
       { immediate: true }
     );
-    vueDemi.watch(
+    vue.watch(
       variable,
       (val) => {
         var _a;
@@ -2056,10 +1925,10 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
   const bottomVarName = "--vueuse-safe-area-bottom";
   const leftVarName = "--vueuse-safe-area-left";
   function useScreenSafeArea() {
-    const top = vueDemi.ref("");
-    const right = vueDemi.ref("");
-    const bottom = vueDemi.ref("");
-    const left = vueDemi.ref("");
+    const top = vue.ref("");
+    const right = vue.ref("");
+    const bottom = vue.ref("");
+    const left = vue.ref("");
     if (shared.isClient) {
       const topCssVar = useCssVar(topVarName);
       const rightCssVar = useCssVar(rightVarName);
@@ -2090,7 +1959,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     return getComputedStyle(document.documentElement).getPropertyValue(position);
   }
 
-  const UseScreenSafeArea = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
+  const UseScreenSafeArea = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
     name: "UseScreenSafeArea",
     props: {
       top: Boolean,
@@ -2107,7 +1976,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
       } = useScreenSafeArea();
       return () => {
         if (slots.default) {
-          return vueDemi.h("div", {
+          return vue.h("div", {
             style: {
               paddingTop: props.top ? top.value : "",
               paddingRight: props.right ? right.value : "",
@@ -2125,7 +1994,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
   });
 
   const vScroll = {
-    [shared.directiveHooks.mounted](el, binding) {
+    mounted(el, binding) {
       if (typeof binding.value === "function") {
         const handler = binding.value;
         const state = useScroll(el, {
@@ -2179,10 +2048,10 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
   }
   const elInitialOverflow = /* @__PURE__ */ new WeakMap();
   function useScrollLock(element, initialState = false) {
-    const isLocked = vueDemi.ref(initialState);
+    const isLocked = vue.ref(initialState);
     let stopTouchMoveListener = null;
     let initialOverflow = "";
-    vueDemi.watch(shared.toRef(element), (el) => {
+    vue.watch(shared.toRef(element), (el) => {
       const target = resolveElement(shared.toValue(el));
       if (target) {
         const ele = target;
@@ -2226,7 +2095,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
       isLocked.value = false;
     };
     shared.tryOnScopeDispose(unlock);
-    return vueDemi.computed({
+    return vue.computed({
       get() {
         return isLocked.value;
       },
@@ -2240,23 +2109,23 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
 
   function onScrollLock() {
     let isMounted = false;
-    const state = vueDemi.ref(false);
+    const state = vue.ref(false);
     return (el, binding) => {
       state.value = binding.value;
       if (isMounted)
         return;
       isMounted = true;
       const isLocked = useScrollLock(el, binding.value);
-      vueDemi.watch(state, (v) => isLocked.value = v);
+      vue.watch(state, (v) => isLocked.value = v);
     };
   }
   const vScrollLock = onScrollLock();
 
-  const UseTimeAgo = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
+  const UseTimeAgo = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
     name: "UseTimeAgo",
     props: ["time", "updateInterval", "max", "fullDateFormatter", "messages", "showSecond"],
     setup(props, { slots }) {
-      const data = vueDemi.reactive(core.useTimeAgo(() => props.time, { ...props, controls: true }));
+      const data = vue.reactive(core.useTimeAgo(() => props.time, { ...props, controls: true }));
       return () => {
         if (slots.default)
           return slots.default(data);
@@ -2264,11 +2133,11 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     }
   });
 
-  const UseTimestamp = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
+  const UseTimestamp = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
     name: "UseTimestamp",
     props: ["immediate", "interval", "offset"],
     setup(props, { slots }) {
-      const data = vueDemi.reactive(core.useTimestamp({ ...props, controls: true }));
+      const data = vue.reactive(core.useTimestamp({ ...props, controls: true }));
       return () => {
         if (slots.default)
           return slots.default(data);
@@ -2276,7 +2145,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     }
   });
 
-  const UseVirtualList = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
+  const UseVirtualList = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
     name: "UseVirtualList",
     props: [
       "list",
@@ -2284,21 +2153,21 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
       "height"
     ],
     setup(props, { slots, expose }) {
-      const { list: listRef } = vueDemi.toRefs(props);
+      const { list: listRef } = vue.toRefs(props);
       const { list, containerProps, wrapperProps, scrollTo } = core.useVirtualList(listRef, props.options);
       expose({ scrollTo });
       if (containerProps.style && typeof containerProps.style === "object" && !Array.isArray(containerProps.style))
         containerProps.style.height = props.height || "300px";
-      return () => vueDemi.h("div", { ...containerProps }, [
-        vueDemi.h("div", { ...wrapperProps.value }, list.value.map((item) => vueDemi.h("div", { style: { overflow: "hidden", height: item.height } }, slots.default ? slots.default(item) : "Please set content!")))
+      return () => vue.h("div", { ...containerProps }, [
+        vue.h("div", { ...wrapperProps.value }, list.value.map((item) => vue.h("div", { style: { overflow: "hidden", height: item.height } }, slots.default ? slots.default(item) : "Please set content!")))
       ]);
     }
   });
 
-  const UseWindowFocus = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
+  const UseWindowFocus = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
     name: "UseWindowFocus",
     setup(props, { slots }) {
-      const data = vueDemi.reactive({
+      const data = vue.reactive({
         focused: core.useWindowFocus()
       });
       return () => {
@@ -2308,11 +2177,11 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     }
   });
 
-  const UseWindowSize = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
+  const UseWindowSize = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
     name: "UseWindowSize",
     props: ["initialWidth", "initialHeight"],
     setup(props, { slots }) {
-      const data = vueDemi.reactive(core.useWindowSize(props));
+      const data = vue.reactive(core.useWindowSize(props));
       return () => {
         if (slots.default)
           return slots.default(data);
@@ -2378,4 +2247,4 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
   exports.vScroll = vScroll;
   exports.vScrollLock = vScrollLock;
 
-})(this.VueUse = this.VueUse || {}, VueUse, VueDemi, VueUse);
+})(this.VueUse = this.VueUse || {}, VueUse, Vue, VueUse);