@vueuse/integrations 10.0.0-beta.2 → 10.0.0-beta.3

package/index.mjs

@@ -1,6 +1,6 @@
 import { resolveRef, resolveUnref, until, isString, isFunction, tryOnScopeDispose, isNumber, isClient } from '@vueuse/shared';
 import Schema from 'async-validator';
-import { shallowRef, ref, computed, watch, unref, watchEffect } from 'vue-demi';
+import { shallowRef, ref, computed, watch, unref, watchEffect, nextTick } from 'vue-demi';
 import axios, { AxiosError } from 'axios';
 import { camelCase, capitalCase, constantCase, dotCase, headerCase, noCase, paramCase, pascalCase, pathCase, sentenceCase, snakeCase } from 'change-case';
 import Cookie from 'universal-cookie';
@@ -73,7 +73,11 @@ function useAsyncValidator(value, rules, options = {}) {
     };
   };
   if (!manual) {
-    watch([valueRef, validator], () => execute(), { immediate, deep: true });
+    watch(
+      [valueRef, validator],
+      () => execute(),
+      { immediate, deep: true }
+    );
   }
   const shell = {
     isFinished,
@@ -194,14 +198,10 @@ function useAxios(...args) {
     response,
     data,
     error,
-    finished: isFinished,
-    loading: isLoading,
     isFinished,
     isLoading,
     cancel: abort,
     isAborted,
-    canceled: isAborted,
-    aborted: isAborted,
     isCanceled: isAborted,
     abort,
     execute
@@ -266,7 +266,11 @@ function useCookies(dependencies, { doNotParse = false, autoUpdateDependencies =
   const touches = ref(0);
   const onChange = () => {
     const newCookies = cookies.getAll({ doNotParse: true });
-    if (shouldUpdate(watchingDependencies || null, newCookies, previousCookies))
+    if (shouldUpdate(
+      watchingDependencies || null,
+      newCookies,
+      previousCookies
+    ))
       touches.value++;
     previousCookies = newCookies;
   };
@@ -275,12 +279,18 @@ function useCookies(dependencies, { doNotParse = false, autoUpdateDependencies =
     cookies.removeChangeListener(onChange);
   });
   return {
+    /**
+     * Reactive get cookie by name. If **autoUpdateDependencies = true** then it will update watching dependencies
+     */
     get: (...args) => {
       if (autoUpdateDependencies && watchingDependencies && !watchingDependencies.includes(args[0]))
         watchingDependencies.push(args[0]);
       touches.value;
       return cookies.get(args[0], __spreadValues$4({ doNotParse }, args[1]));
     },
+    /**
+     * Reactive get all cookies
+     */
     getAll: (...args) => {
       touches.value;
       return cookies.getAll(__spreadValues$4({ doNotParse }, args[0]));
@@ -382,24 +392,28 @@ function useDrauu(target, options) {
       shiftPressed.value = drauuInstance.value.shiftPressed;
     }
   };
-  watch(() => unrefElement(target), (el) => {
-    if (!el || typeof SVGSVGElement === "undefined" || !(el instanceof SVGSVGElement))
-      return;
-    if (drauuInstance.value)
-      cleanup();
-    drauuInstance.value = createDrauu(__spreadValues$3({ el }, options));
-    syncStatus();
-    disposables = [
-      drauuInstance.value.on("canceled", () => onCanceledHook.trigger()),
-      drauuInstance.value.on("committed", () => onCommittedHook.trigger()),
-      drauuInstance.value.on("start", () => onStartHook.trigger()),
-      drauuInstance.value.on("end", () => onEndHook.trigger()),
-      drauuInstance.value.on("changed", () => {
-        syncStatus();
-        onChangedHook.trigger();
-      })
-    ];
-  }, { flush: "post" });
+  watch(
+    () => unrefElement(target),
+    (el) => {
+      if (!el || typeof SVGSVGElement === "undefined" || !(el instanceof SVGSVGElement))
+        return;
+      if (drauuInstance.value)
+        cleanup();
+      drauuInstance.value = createDrauu(__spreadValues$3({ el }, options));
+      syncStatus();
+      disposables = [
+        drauuInstance.value.on("canceled", () => onCanceledHook.trigger()),
+        drauuInstance.value.on("committed", () => onCommittedHook.trigger()),
+        drauuInstance.value.on("start", () => onStartHook.trigger()),
+        drauuInstance.value.on("end", () => onEndHook.trigger()),
+        drauuInstance.value.on("changed", () => {
+          syncStatus();
+          onChangedHook.trigger();
+        })
+      ];
+    },
+    { flush: "post" }
+  );
   tryOnScopeDispose(() => cleanup());
   return {
     drauuInstance,
@@ -470,24 +484,28 @@ function useFocusTrap(target, options = {}) {
       isPaused.value = false;
     }
   };
-  watch(() => unrefElement(target), (el) => {
-    if (!el)
-      return;
-    trap = createFocusTrap(el, __spreadProps(__spreadValues$2({}, focusTrapOptions), {
-      onActivate() {
-        hasFocus.value = true;
-        if (options.onActivate)
-          options.onActivate();
-      },
-      onDeactivate() {
-        hasFocus.value = false;
-        if (options.onDeactivate)
-          options.onDeactivate();
-      }
-    }));
-    if (immediate)
-      activate();
-  }, { flush: "post" });
+  watch(
+    () => unrefElement(target),
+    (el) => {
+      if (!el)
+        return;
+      trap = createFocusTrap(el, __spreadProps(__spreadValues$2({}, focusTrapOptions), {
+        onActivate() {
+          hasFocus.value = true;
+          if (options.onActivate)
+            options.onActivate();
+        },
+        onDeactivate() {
+          hasFocus.value = false;
+          if (options.onDeactivate)
+            options.onDeactivate();
+        }
+      }));
+      if (immediate)
+        activate();
+    },
+    { flush: "post" }
+  );
   tryOnScopeDispose$1(() => deactivate());
   return {
     hasFocus,
@@ -502,18 +520,29 @@ function useFocusTrap(target, options = {}) {
 function useFuse(search, data, options) {
   const createFuse = () => {
     var _a, _b;
-    return new Fuse((_a = resolveUnref(data)) != null ? _a : [], (_b = resolveUnref(options)) == null ? void 0 : _b.fuseOptions);
+    return new Fuse(
+      (_a = resolveUnref(data)) != null ? _a : [],
+      (_b = resolveUnref(options)) == null ? void 0 : _b.fuseOptions
+    );
   };
   const fuse = ref(createFuse());
-  watch(() => {
-    var _a;
-    return (_a = resolveUnref(options)) == null ? void 0 : _a.fuseOptions;
-  }, () => {
-    fuse.value = createFuse();
-  }, { deep: true });
-  watch(() => resolveUnref(data), (newData) => {
-    fuse.value.setCollection(newData);
-  }, { deep: true });
+  watch(
+    () => {
+      var _a;
+      return (_a = resolveUnref(options)) == null ? void 0 : _a.fuseOptions;
+    },
+    () => {
+      fuse.value = createFuse();
+    },
+    { deep: true }
+  );
+  watch(
+    () => resolveUnref(data),
+    (newData) => {
+      fuse.value.setCollection(newData);
+    },
+    { deep: true }
+  );
   const results = computed(() => {
     const resolved = resolveUnref(options);
     if ((resolved == null ? void 0 : resolved.matchAllWhenSearchEmpty) && !unref(search))
@@ -645,10 +674,14 @@ function useNProgress(currentProgress = null, options) {
 function useQRCode(text, options) {
   const src = resolveRef(text);
   const result = ref("");
-  watch(src, async (value) => {
-    if (src.value && isClient)
-      result.value = await QRCode.toDataURL(value, options);
-  }, { immediate: true });
+  watch(
+    src,
+    async (value) => {
+      if (src.value && isClient)
+        result.value = await QRCode.toDataURL(value, options);
+    },
+    { immediate: true }
+  );
   return result;
 }
 
@@ -701,8 +734,10 @@ function useSortable(el, list, options = {}) {
 }
 function moveArrayElement(list, from, to) {
   const array = resolveUnref$1(list);
-  if (to >= 0 && to < array.length)
-    array.splice(to, 0, array.splice(from, 1)[0]);
+  if (to >= 0 && to < array.length) {
+    const element = array.splice(from, 1)[0];
+    nextTick(() => array.splice(to, 0, element));
+  }
 }
 
 export { createCookies, moveArrayElement, useAsyncValidator, useAxios, useChangeCase, useCookies, useDrauu, useFocusTrap, useFuse, useIDBKeyval, useJwt, useNProgress, useQRCode, useSortable };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vueuse/integrations",
-  "version": "10.0.0-beta.2",
+  "version": "10.0.0-beta.3",
   "description": "Integration wrappers for utility libraries",
   "author": "Anthony Fu <https://github.com/antfu>",
   "license": "MIT",
@@ -161,16 +161,16 @@
     }
   },
   "dependencies": {
-    "@vueuse/core": "10.0.0-beta.2",
-    "@vueuse/shared": "10.0.0-beta.2",
+    "@vueuse/core": "10.0.0-beta.3",
+    "@vueuse/shared": "10.0.0-beta.3",
     "vue-demi": "*"
   },
   "devDependencies": {
     "@types/nprogress": "^0.2.0",
     "@types/qrcode": "^1.5.0",
-    "@types/sortablejs": "^1.15.0",
+    "@types/sortablejs": "^1.15.1",
     "async-validator": "^4.2.5",
-    "axios": "^1.3.4",
+    "axios": "^1.3.5",
     "change-case": "^4.1.2",
     "drauu": "^0.3.2",
     "focus-trap": "^7.4.0",

package/useAsyncValidator/component.cjs

@@ -63,7 +63,11 @@ function useAsyncValidator(value, rules, options = {}) {
     };
   };
   if (!manual) {
-    vueDemi.watch([valueRef, validator], () => execute(), { immediate, deep: true });
+    vueDemi.watch(
+      [valueRef, validator],
+      () => execute(),
+      { immediate, deep: true }
+    );
   }
   const shell = {
     isFinished,

package/useAsyncValidator/component.mjs

@@ -61,7 +61,11 @@ function useAsyncValidator(value, rules, options = {}) {
     };
   };
   if (!manual) {
-    watch([valueRef, validator], () => execute(), { immediate, deep: true });
+    watch(
+      [valueRef, validator],
+      () => execute(),
+      { immediate, deep: true }
+    );
   }
   const shell = {
     isFinished,

package/useAsyncValidator.cjs

@@ -63,7 +63,11 @@ function useAsyncValidator(value, rules, options = {}) {
     };
   };
   if (!manual) {
-    vueDemi.watch([valueRef, validator], () => execute(), { immediate, deep: true });
+    vueDemi.watch(
+      [valueRef, validator],
+      () => execute(),
+      { immediate, deep: true }
+    );
   }
   const shell = {
     isFinished,

package/useAsyncValidator.iife.js

@@ -174,7 +174,11 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
       };
     };
     if (!manual) {
-      vueDemi.watch([valueRef, validator], () => execute(), { immediate, deep: true });
+      vueDemi.watch(
+        [valueRef, validator],
+        () => execute(),
+        { immediate, deep: true }
+      );
     }
     const shell = {
       isFinished,

package/useAsyncValidator.iife.min.js

@@ -1 +1 @@
-var VueDemi=function(e,r,v){if(e.install)return e;if(!r)return console.error("[vue-demi] no Vue instance found, please be sure to import `vue` before `vue-demi`."),e;if(r.version.slice(0,4)==="2.7."){let o=function(i,c){var f,y={},h={config:r.config,use:r.use.bind(r),mixin:r.mixin.bind(r),component:r.component.bind(r),provide:function(u,d){return y[u]=d,this},directive:function(u,d){return d?(r.directive(u,d),h):r.directive(u)},mount:function(u,d){return f||(f=new r(Object.assign({propsData:c},i,{provide:Object.assign(y,i.provide)})),f.$mount(u,d),f)},unmount:function(){f&&(f.$destroy(),f=void 0)}};return h};var F=o;for(var n in r)e[n]=r[n];e.isVue2=!0,e.isVue3=!1,e.install=function(){},e.Vue=r,e.Vue2=r,e.version=r.version,e.warn=r.util.warn,e.createApp=o}else if(r.version.slice(0,2)==="2.")if(v){for(var n in v)e[n]=v[n];e.isVue2=!0,e.isVue3=!1,e.install=function(){},e.Vue=r,e.Vue2=r,e.version=r.version}else console.error("[vue-demi] no VueCompositionAPI instance found, please be sure to import `@vue/composition-api` before `vue-demi`.");else if(r.version.slice(0,2)==="3."){for(var n in r)e[n]=r[n];e.isVue2=!1,e.isVue3=!0,e.install=function(){},e.Vue=r,e.Vue2=void 0,e.version=r.version,e.set=function(o,i,c){return Array.isArray(o)?(o.length=Math.max(o.length,i),o.splice(i,1,c),c):(o[i]=c,c)},e.del=function(o,i){if(Array.isArray(o)){o.splice(i,1);return}delete o[i]}}else console.error("[vue-demi] Vue version "+r.version+" is unsupported.");return e}(this.VueDemi=this.VueDemi||(typeof VueDemi!="undefined"?VueDemi:{}),this.Vue||(typeof Vue!="undefined"?Vue:void 0),this.VueCompositionAPI||(typeof VueCompositionAPI!="undefined"?VueCompositionAPI:void 0));(function(e,r,v,n){"use strict";var F=Object.defineProperty,o=Object.defineProperties,i=Object.getOwnPropertyDescriptors,c=Object.getOwnPropertySymbols,f=Object.prototype.hasOwnProperty,y=Object.prototype.propertyIsEnumerable,h=(a,t,s)=>t in a?F(a,t,{enumerable:!0,configurable:!0,writable:!0,value:s}):a[t]=s,u=(a,t)=>{for(var s in t||(t={}))f.call(t,s)&&h(a,s,t[s]);if(c)for(var s of c(t))y.call(t,s)&&h(a,s,t[s]);return a},d=(a,t)=>o(a,i(t));const R=v.default||v;function E(a,t,s={}){const{validateOption:S={},immediate:P=!0,manual:b=!1}=s,A=r.resolveRef(a),p=n.shallowRef(null),_=n.ref(!0),w=n.ref(!P||b),j=n.computed(()=>{var l;return((l=p.value)==null?void 0:l.errors)||[]}),I=n.computed(()=>{var l;return((l=p.value)==null?void 0:l.fields)||{}}),g=n.computed(()=>new R(r.resolveUnref(t))),U=async()=>{_.value=!1,w.value=!1;try{await g.value.validate(A.value,S),w.value=!0,p.value=null}catch(l){p.value=l}finally{_.value=!0}return{pass:w.value,errorInfo:p.value,errors:j.value,errorFields:I.value}};b||n.watch([A,g],()=>U(),{immediate:P,deep:!0});const x={isFinished:_,pass:w,errors:j,errorInfo:p,errorFields:I,execute:U};function $(){return new Promise((l,O)=>{r.until(_).toBe(!0).then(()=>l(x)).catch(B=>O(B))})}return d(u({},x),{then(l,O){return $().then(l,O)}})}e.useAsyncValidator=E})(this.VueUse=this.VueUse||{},VueUse,AsyncValidator,VueDemi);
+var VueDemi=function(e,r,v){if(e.install)return e;if(!r)return console.error("[vue-demi] no Vue instance found, please be sure to import `vue` before `vue-demi`."),e;if(r.version.slice(0,4)==="2.7."){let o=function(i,c){var f,y={},h={config:r.config,use:r.use.bind(r),mixin:r.mixin.bind(r),component:r.component.bind(r),provide:function(u,d){return y[u]=d,this},directive:function(u,d){return d?(r.directive(u,d),h):r.directive(u)},mount:function(u,d){return f||(f=new r(Object.assign({propsData:c},i,{provide:Object.assign(y,i.provide)})),f.$mount(u,d),f)},unmount:function(){f&&(f.$destroy(),f=void 0)}};return h};var F=o;for(var n in r)e[n]=r[n];e.isVue2=!0,e.isVue3=!1,e.install=function(){},e.Vue=r,e.Vue2=r,e.version=r.version,e.warn=r.util.warn,e.createApp=o}else if(r.version.slice(0,2)==="2.")if(v){for(var n in v)e[n]=v[n];e.isVue2=!0,e.isVue3=!1,e.install=function(){},e.Vue=r,e.Vue2=r,e.version=r.version}else console.error("[vue-demi] no VueCompositionAPI instance found, please be sure to import `@vue/composition-api` before `vue-demi`.");else if(r.version.slice(0,2)==="3."){for(var n in r)e[n]=r[n];e.isVue2=!1,e.isVue3=!0,e.install=function(){},e.Vue=r,e.Vue2=void 0,e.version=r.version,e.set=function(o,i,c){return Array.isArray(o)?(o.length=Math.max(o.length,i),o.splice(i,1,c),c):(o[i]=c,c)},e.del=function(o,i){if(Array.isArray(o)){o.splice(i,1);return}delete o[i]}}else console.error("[vue-demi] Vue version "+r.version+" is unsupported.");return e}(this.VueDemi=this.VueDemi||(typeof VueDemi<"u"?VueDemi:{}),this.Vue||(typeof Vue<"u"?Vue:void 0),this.VueCompositionAPI||(typeof VueCompositionAPI<"u"?VueCompositionAPI:void 0));(function(e,r,v,n){"use strict";var F=Object.defineProperty,o=Object.defineProperties,i=Object.getOwnPropertyDescriptors,c=Object.getOwnPropertySymbols,f=Object.prototype.hasOwnProperty,y=Object.prototype.propertyIsEnumerable,h=(a,t,s)=>t in a?F(a,t,{enumerable:!0,configurable:!0,writable:!0,value:s}):a[t]=s,u=(a,t)=>{for(var s in t||(t={}))f.call(t,s)&&h(a,s,t[s]);if(c)for(var s of c(t))y.call(t,s)&&h(a,s,t[s]);return a},d=(a,t)=>o(a,i(t));const R=v.default||v;function E(a,t,s={}){const{validateOption:S={},immediate:P=!0,manual:b=!1}=s,A=r.resolveRef(a),p=n.shallowRef(null),_=n.ref(!0),w=n.ref(!P||b),j=n.computed(()=>{var l;return((l=p.value)==null?void 0:l.errors)||[]}),I=n.computed(()=>{var l;return((l=p.value)==null?void 0:l.fields)||{}}),g=n.computed(()=>new R(r.resolveUnref(t))),U=async()=>{_.value=!1,w.value=!1;try{await g.value.validate(A.value,S),w.value=!0,p.value=null}catch(l){p.value=l}finally{_.value=!0}return{pass:w.value,errorInfo:p.value,errors:j.value,errorFields:I.value}};b||n.watch([A,g],()=>U(),{immediate:P,deep:!0});const x={isFinished:_,pass:w,errors:j,errorInfo:p,errorFields:I,execute:U};function $(){return new Promise((l,O)=>{r.until(_).toBe(!0).then(()=>l(x)).catch(B=>O(B))})}return d(u({},x),{then(l,O){return $().then(l,O)}})}e.useAsyncValidator=E})(this.VueUse=this.VueUse||{},VueUse,AsyncValidator,VueDemi);

package/useAsyncValidator.mjs

@@ -61,7 +61,11 @@ function useAsyncValidator(value, rules, options = {}) {
     };
   };
   if (!manual) {
-    watch([valueRef, validator], () => execute(), { immediate, deep: true });
+    watch(
+      [valueRef, validator],
+      () => execute(),
+      { immediate, deep: true }
+    );
   }
   const shell = {
     isFinished,

package/useAxios.cjs

@@ -103,14 +103,10 @@ function useAxios(...args) {
     response,
     data,
     error,
-    finished: isFinished,
-    loading: isLoading,
     isFinished,
     isLoading,
     cancel: abort,
     isAborted,
-    canceled: isAborted,
-    aborted: isAborted,
     isCanceled: isAborted,
     abort,
     execute

package/useAxios.d.ts

@@ -31,31 +31,11 @@ interface UseAxiosReturn<T, R = AxiosResponse<T>, _D = any> {
      */
     abort: (message?: string | undefined) => void;
     /**
-     * isFinished alias
-     * @deprecated use `isFinished` instead
-     */
-    finished: Ref<boolean>;
-    /**
-     * isLoading alias
-     * @deprecated use `isLoading` instead
-     */
-    loading: Ref<boolean>;
-    /**
-     * isAborted alias
-     * @deprecated use `isAborted` instead
-     */
-    aborted: Ref<boolean>;
-    /**
-     * abort alias
+     * Alias to `abort`
      */
     cancel: (message?: string | undefined) => void;
     /**
-     * isAborted alias
-     * @deprecated use `isCanceled` instead
-     */
-    canceled: Ref<boolean>;
-    /**
-     * isAborted alias
+     * Alice to `isAborted`
      */
     isCanceled: Ref<boolean>;
 }

package/useAxios.iife.js

@@ -214,14 +214,10 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
       response,
       data,
       error,
-      finished: isFinished,
-      loading: isLoading,
       isFinished,
       isLoading,
       cancel: abort,
       isAborted,
-      canceled: isAborted,
-      aborted: isAborted,
       isCanceled: isAborted,
       abort,
       execute

package/useAxios.iife.min.js

@@ -1 +1 @@
-var VueDemi=function(e,n,_){if(e.install)return e;if(!n)return console.error("[vue-demi] no Vue instance found, please be sure to import `vue` before `vue-demi`."),e;if(n.version.slice(0,4)==="2.7."){let s=function(c,u){var a,O={},b={config:n.config,use:n.use.bind(n),mixin:n.mixin.bind(n),component:n.component.bind(n),provide:function(f,d){return O[f]=d,this},directive:function(f,d){return d?(n.directive(f,d),b):n.directive(f)},mount:function(f,d){return a||(a=new n(Object.assign({propsData:u},c,{provide:Object.assign(O,c.provide)})),a.$mount(f,d),a)},unmount:function(){a&&(a.$destroy(),a=void 0)}};return b};var q=s;for(var l in n)e[l]=n[l];e.isVue2=!0,e.isVue3=!1,e.install=function(){},e.Vue=n,e.Vue2=n,e.version=n.version,e.warn=n.util.warn,e.createApp=s}else if(n.version.slice(0,2)==="2.")if(_){for(var l in _)e[l]=_[l];e.isVue2=!0,e.isVue3=!1,e.install=function(){},e.Vue=n,e.Vue2=n,e.version=n.version}else console.error("[vue-demi] no VueCompositionAPI instance found, please be sure to import `@vue/composition-api` before `vue-demi`.");else if(n.version.slice(0,2)==="3."){for(var l in n)e[l]=n[l];e.isVue2=!1,e.isVue3=!0,e.install=function(){},e.Vue=n,e.Vue2=void 0,e.version=n.version,e.set=function(s,c,u){return Array.isArray(s)?(s.length=Math.max(s.length,c),s.splice(c,1,u),u):(s[c]=u,u)},e.del=function(s,c){if(Array.isArray(s)){s.splice(c,1);return}delete s[c]}}else console.error("[vue-demi] Vue version "+n.version+" is unsupported.");return e}(this.VueDemi=this.VueDemi||(typeof VueDemi!="undefined"?VueDemi:{}),this.Vue||(typeof Vue!="undefined"?Vue:void 0),this.VueCompositionAPI||(typeof VueCompositionAPI!="undefined"?VueCompositionAPI:void 0));(function(e,n,_,l){"use strict";var q=Object.defineProperty,s=Object.defineProperties,c=Object.getOwnPropertyDescriptors,u=Object.getOwnPropertySymbols,a=Object.prototype.hasOwnProperty,O=Object.prototype.propertyIsEnumerable,b=(r,t,o)=>t in r?q(r,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):r[t]=o,f=(r,t)=>{for(var o in t||(t={}))a.call(t,o)&&b(r,o,t[o]);if(u)for(var o of u(t))O.call(t,o)&&b(r,o,t[o]);return r},d=(r,t)=>s(r,c(t));function B(...r){const t=typeof r[0]=="string"?r[0]:void 0,o=_.isString(t)?1:0;let C={},I=l,v={immediate:!!o,shallow:!0};const E=i=>!!(i==null?void 0:i.request);r.length>0+o&&(E(r[0+o])?I=r[0+o]:C=r[0+o]),r.length>1+o&&E(r[1+o])&&(I=r[1+o]),(r.length===2+o&&!E(r[1+o])||r.length===3+o)&&(v=r[r.length-1]);const T=n.shallowRef(),g=v.shallow?n.shallowRef():n.ref(),h=n.ref(!1),y=n.ref(!1),P=n.ref(!1),j=n.shallowRef(),F=l.CancelToken.source;let R=F();const S=i=>{h.value||!y.value||(R.cancel(i),R=F(),P.value=!0,y.value=!1,h.value=!1)},L=i=>{y.value=i,h.value=!i},M=()=>new Promise((i,w)=>{_.until(h).toBe(!0).then(()=>i(U)).catch(w)}),x=(i,w)=>M().then(i,w),N=(i=t,w={})=>{j.value=void 0;const $=typeof i=="string"?i:t??w.url;return $===void 0?(j.value=new l.AxiosError(l.AxiosError.ERR_INVALID_URL),h.value=!0,{then:x}):(S(),L(!0),I($,d(f(f({},C),typeof i=="object"?i:w),{cancelToken:R.token})).then(p=>{var A;T.value=p;const k=p.data;g.value=k,(A=v.onSuccess)==null||A.call(v,k)}).catch(p=>{var A;j.value=p,(A=v.onError)==null||A.call(v,p)}).finally(()=>{var p;(p=v.onFinish)==null||p.call(v),L(!1)}),{then:x})};v.immediate&&t&&N();const U={response:T,data:g,error:j,finished:h,loading:y,isFinished:h,isLoading:y,cancel:S,isAborted:P,canceled:P,aborted:P,isCanceled:P,abort:S,execute:N};return d(f({},U),{then:x})}e.useAxios=B})(this.VueUse=this.VueUse||{},VueDemi,VueUse,axios);
+var VueDemi=function(e,n,h){if(e.install)return e;if(!n)return console.error("[vue-demi] no Vue instance found, please be sure to import `vue` before `vue-demi`."),e;if(n.version.slice(0,4)==="2.7."){let s=function(c,u){var f,P={},y={config:n.config,use:n.use.bind(n),mixin:n.mixin.bind(n),component:n.component.bind(n),provide:function(a,d){return P[a]=d,this},directive:function(a,d){return d?(n.directive(a,d),y):n.directive(a)},mount:function(a,d){return f||(f=new n(Object.assign({propsData:u},c,{provide:Object.assign(P,c.provide)})),f.$mount(a,d),f)},unmount:function(){f&&(f.$destroy(),f=void 0)}};return y};var q=s;for(var l in n)e[l]=n[l];e.isVue2=!0,e.isVue3=!1,e.install=function(){},e.Vue=n,e.Vue2=n,e.version=n.version,e.warn=n.util.warn,e.createApp=s}else if(n.version.slice(0,2)==="2.")if(h){for(var l in h)e[l]=h[l];e.isVue2=!0,e.isVue3=!1,e.install=function(){},e.Vue=n,e.Vue2=n,e.version=n.version}else console.error("[vue-demi] no VueCompositionAPI instance found, please be sure to import `@vue/composition-api` before `vue-demi`.");else if(n.version.slice(0,2)==="3."){for(var l in n)e[l]=n[l];e.isVue2=!1,e.isVue3=!0,e.install=function(){},e.Vue=n,e.Vue2=void 0,e.version=n.version,e.set=function(s,c,u){return Array.isArray(s)?(s.length=Math.max(s.length,c),s.splice(c,1,u),u):(s[c]=u,u)},e.del=function(s,c){if(Array.isArray(s)){s.splice(c,1);return}delete s[c]}}else console.error("[vue-demi] Vue version "+n.version+" is unsupported.");return e}(this.VueDemi=this.VueDemi||(typeof VueDemi<"u"?VueDemi:{}),this.Vue||(typeof Vue<"u"?Vue:void 0),this.VueCompositionAPI||(typeof VueCompositionAPI<"u"?VueCompositionAPI:void 0));(function(e,n,h,l){"use strict";var q=Object.defineProperty,s=Object.defineProperties,c=Object.getOwnPropertyDescriptors,u=Object.getOwnPropertySymbols,f=Object.prototype.hasOwnProperty,P=Object.prototype.propertyIsEnumerable,y=(r,t,o)=>t in r?q(r,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):r[t]=o,a=(r,t)=>{for(var o in t||(t={}))f.call(t,o)&&y(r,o,t[o]);if(u)for(var o of u(t))P.call(t,o)&&y(r,o,t[o]);return r},d=(r,t)=>s(r,c(t));function B(...r){const t=typeof r[0]=="string"?r[0]:void 0,o=h.isString(t)?1:0;let C={},j=l,v={immediate:!!o,shallow:!0};const I=i=>!!i?.request;r.length>0+o&&(I(r[0+o])?j=r[0+o]:C=r[0+o]),r.length>1+o&&I(r[1+o])&&(j=r[1+o]),(r.length===2+o&&!I(r[1+o])||r.length===3+o)&&(v=r[r.length-1]);const T=n.shallowRef(),F=v.shallow?n.shallowRef():n.ref(),_=n.ref(!1),A=n.ref(!1),E=n.ref(!1),O=n.shallowRef(),L=l.CancelToken.source;let R=L();const S=i=>{_.value||!A.value||(R.cancel(i),R=L(),E.value=!0,A.value=!1,_.value=!1)},g=i=>{A.value=i,_.value=!i},M=()=>new Promise((i,w)=>{h.until(_).toBe(!0).then(()=>i(U)).catch(w)}),x=(i,w)=>M().then(i,w),N=(i=t,w={})=>{O.value=void 0;const $=typeof i=="string"?i:t??w.url;return $===void 0?(O.value=new l.AxiosError(l.AxiosError.ERR_INVALID_URL),_.value=!0,{then:x}):(S(),g(!0),j($,d(a(a({},C),typeof i=="object"?i:w),{cancelToken:R.token})).then(p=>{var b;T.value=p;const k=p.data;F.value=k,(b=v.onSuccess)==null||b.call(v,k)}).catch(p=>{var b;O.value=p,(b=v.onError)==null||b.call(v,p)}).finally(()=>{var p;(p=v.onFinish)==null||p.call(v),g(!1)}),{then:x})};v.immediate&&t&&N();const U={response:T,data:F,error:O,isFinished:_,isLoading:A,cancel:S,isAborted:E,isCanceled:E,abort:S,execute:N};return d(a({},U),{then:x})}e.useAxios=B})(this.VueUse=this.VueUse||{},VueDemi,VueUse,axios);

package/useAxios.mjs

@@ -101,14 +101,10 @@ function useAxios(...args) {
     response,
     data,
     error,
-    finished: isFinished,
-    loading: isLoading,
     isFinished,
     isLoading,
     cancel: abort,
     isAborted,
-    canceled: isAborted,
-    aborted: isAborted,
     isCanceled: isAborted,
     abort,
     execute

package/useChangeCase.iife.min.js

@@ -1 +1 @@
-var VueDemi=function(n,e,a){if(n.install)return n;if(!e)return console.error("[vue-demi] no Vue instance found, please be sure to import `vue` before `vue-demi`."),n;if(e.version.slice(0,4)==="2.7."){let r=function(i,t){var o,l={},d={config:e.config,use:e.use.bind(e),mixin:e.mixin.bind(e),component:e.component.bind(e),provide:function(f,c){return l[f]=c,this},directive:function(f,c){return c?(e.directive(f,c),d):e.directive(f)},mount:function(f,c){return o||(o=new e(Object.assign({propsData:t},i,{provide:Object.assign(l,i.provide)})),o.$mount(f,c),o)},unmount:function(){o&&(o.$destroy(),o=void 0)}};return d};var p=r;for(var s in e)n[s]=e[s];n.isVue2=!0,n.isVue3=!1,n.install=function(){},n.Vue=e,n.Vue2=e,n.version=e.version,n.warn=e.util.warn,n.createApp=r}else if(e.version.slice(0,2)==="2.")if(a){for(var s in a)n[s]=a[s];n.isVue2=!0,n.isVue3=!1,n.install=function(){},n.Vue=e,n.Vue2=e,n.version=e.version}else console.error("[vue-demi] no VueCompositionAPI instance found, please be sure to import `@vue/composition-api` before `vue-demi`.");else if(e.version.slice(0,2)==="3."){for(var s in e)n[s]=e[s];n.isVue2=!1,n.isVue3=!0,n.install=function(){},n.Vue=e,n.Vue2=void 0,n.version=e.version,n.set=function(r,i,t){return Array.isArray(r)?(r.length=Math.max(r.length,i),r.splice(i,1,t),t):(r[i]=t,t)},n.del=function(r,i){if(Array.isArray(r)){r.splice(i,1);return}delete r[i]}}else console.error("[vue-demi] Vue version "+e.version+" is unsupported.");return n}(this.VueDemi=this.VueDemi||(typeof VueDemi!="undefined"?VueDemi:{}),this.Vue||(typeof Vue!="undefined"?Vue:void 0),this.VueCompositionAPI||(typeof VueCompositionAPI!="undefined"?VueCompositionAPI:void 0));(function(n,e,a,s){"use strict";var p=Object.freeze({__proto__:null,camelCase:s.camelCase,capitalCase:s.capitalCase,constantCase:s.constantCase,dotCase:s.dotCase,headerCase:s.headerCase,noCase:s.noCase,paramCase:s.paramCase,pascalCase:s.pascalCase,pathCase:s.pathCase,sentenceCase:s.sentenceCase,snakeCase:s.snakeCase});function r(i,t,o){if(e.isFunction(i))return a.computed(()=>p[t](e.resolveUnref(i),o));const l=a.ref(i);return a.computed({get(){return p[t](l.value,o)},set(d){l.value=d}})}n.useChangeCase=r})(this.VueUse=this.VueUse||{},VueUse,VueDemi,changeCase);
+var VueDemi=function(n,e,a){if(n.install)return n;if(!e)return console.error("[vue-demi] no Vue instance found, please be sure to import `vue` before `vue-demi`."),n;if(e.version.slice(0,4)==="2.7."){let r=function(i,t){var o,l={},d={config:e.config,use:e.use.bind(e),mixin:e.mixin.bind(e),component:e.component.bind(e),provide:function(f,c){return l[f]=c,this},directive:function(f,c){return c?(e.directive(f,c),d):e.directive(f)},mount:function(f,c){return o||(o=new e(Object.assign({propsData:t},i,{provide:Object.assign(l,i.provide)})),o.$mount(f,c),o)},unmount:function(){o&&(o.$destroy(),o=void 0)}};return d};var p=r;for(var s in e)n[s]=e[s];n.isVue2=!0,n.isVue3=!1,n.install=function(){},n.Vue=e,n.Vue2=e,n.version=e.version,n.warn=e.util.warn,n.createApp=r}else if(e.version.slice(0,2)==="2.")if(a){for(var s in a)n[s]=a[s];n.isVue2=!0,n.isVue3=!1,n.install=function(){},n.Vue=e,n.Vue2=e,n.version=e.version}else console.error("[vue-demi] no VueCompositionAPI instance found, please be sure to import `@vue/composition-api` before `vue-demi`.");else if(e.version.slice(0,2)==="3."){for(var s in e)n[s]=e[s];n.isVue2=!1,n.isVue3=!0,n.install=function(){},n.Vue=e,n.Vue2=void 0,n.version=e.version,n.set=function(r,i,t){return Array.isArray(r)?(r.length=Math.max(r.length,i),r.splice(i,1,t),t):(r[i]=t,t)},n.del=function(r,i){if(Array.isArray(r)){r.splice(i,1);return}delete r[i]}}else console.error("[vue-demi] Vue version "+e.version+" is unsupported.");return n}(this.VueDemi=this.VueDemi||(typeof VueDemi<"u"?VueDemi:{}),this.Vue||(typeof Vue<"u"?Vue:void 0),this.VueCompositionAPI||(typeof VueCompositionAPI<"u"?VueCompositionAPI:void 0));(function(n,e,a,s){"use strict";var p=Object.freeze({__proto__:null,camelCase:s.camelCase,capitalCase:s.capitalCase,constantCase:s.constantCase,dotCase:s.dotCase,headerCase:s.headerCase,noCase:s.noCase,paramCase:s.paramCase,pascalCase:s.pascalCase,pathCase:s.pathCase,sentenceCase:s.sentenceCase,snakeCase:s.snakeCase});function r(i,t,o){if(e.isFunction(i))return a.computed(()=>p[t](e.resolveUnref(i),o));const l=a.ref(i);return a.computed({get(){return p[t](l.value,o)},set(d){l.value=d}})}n.useChangeCase=r})(this.VueUse=this.VueUse||{},VueUse,VueDemi,changeCase);

package/useCookies.cjs

@@ -30,7 +30,11 @@ function useCookies(dependencies, { doNotParse = false, autoUpdateDependencies =
   const touches = vueDemi.ref(0);
   const onChange = () => {
     const newCookies = cookies.getAll({ doNotParse: true });
-    if (shouldUpdate(watchingDependencies || null, newCookies, previousCookies))
+    if (shouldUpdate(
+      watchingDependencies || null,
+      newCookies,
+      previousCookies
+    ))
       touches.value++;
     previousCookies = newCookies;
   };
@@ -39,12 +43,18 @@ function useCookies(dependencies, { doNotParse = false, autoUpdateDependencies =
     cookies.removeChangeListener(onChange);
   });
   return {
+    /**
+     * Reactive get cookie by name. If **autoUpdateDependencies = true** then it will update watching dependencies
+     */
     get: (...args) => {
       if (autoUpdateDependencies && watchingDependencies && !watchingDependencies.includes(args[0]))
         watchingDependencies.push(args[0]);
       touches.value;
       return cookies.get(args[0], __spreadValues({ doNotParse }, args[1]));
     },
+    /**
+     * Reactive get all cookies
+     */
     getAll: (...args) => {
       touches.value;
       return cookies.getAll(__spreadValues({ doNotParse }, args[0]));

package/useCookies.iife.js

@@ -141,7 +141,11 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     const touches = vueDemi.ref(0);
     const onChange = () => {
       const newCookies = cookies.getAll({ doNotParse: true });
-      if (shouldUpdate(watchingDependencies || null, newCookies, previousCookies))
+      if (shouldUpdate(
+        watchingDependencies || null,
+        newCookies,
+        previousCookies
+      ))
         touches.value++;
       previousCookies = newCookies;
     };
@@ -150,12 +154,18 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
       cookies.removeChangeListener(onChange);
     });
     return {
+      /**
+       * Reactive get cookie by name. If **autoUpdateDependencies = true** then it will update watching dependencies
+       */
       get: (...args) => {
         if (autoUpdateDependencies && watchingDependencies && !watchingDependencies.includes(args[0]))
           watchingDependencies.push(args[0]);
         touches.value;
         return cookies.get(args[0], __spreadValues({ doNotParse }, args[1]));
       },
+      /**
+       * Reactive get all cookies
+       */
       getAll: (...args) => {
         touches.value;
         return cookies.getAll(__spreadValues({ doNotParse }, args[0]));

package/useCookies.iife.min.js

@@ -1 +1 @@
-var VueDemi=function(e,n,h){if(e.install)return e;if(!n)return console.error("[vue-demi] no Vue instance found, please be sure to import `vue` before `vue-demi`."),e;if(n.version.slice(0,4)==="2.7."){let s=function(a,c){var u,C={},g={config:n.config,use:n.use.bind(n),mixin:n.mixin.bind(n),component:n.component.bind(n),provide:function(v,d){return C[v]=d,this},directive:function(v,d){return d?(n.directive(v,d),g):n.directive(v)},mount:function(v,d){return u||(u=new n(Object.assign({propsData:c},a,{provide:Object.assign(C,a.provide)})),u.$mount(v,d),u)},unmount:function(){u&&(u.$destroy(),u=void 0)}};return g};var b=s;for(var l in n)e[l]=n[l];e.isVue2=!0,e.isVue3=!1,e.install=function(){},e.Vue=n,e.Vue2=n,e.version=n.version,e.warn=n.util.warn,e.createApp=s}else if(n.version.slice(0,2)==="2.")if(h){for(var l in h)e[l]=h[l];e.isVue2=!0,e.isVue3=!1,e.install=function(){},e.Vue=n,e.Vue2=n,e.version=n.version}else console.error("[vue-demi] no VueCompositionAPI instance found, please be sure to import `@vue/composition-api` before `vue-demi`.");else if(n.version.slice(0,2)==="3."){for(var l in n)e[l]=n[l];e.isVue2=!1,e.isVue3=!0,e.install=function(){},e.Vue=n,e.Vue2=void 0,e.version=n.version,e.set=function(s,a,c){return Array.isArray(s)?(s.length=Math.max(s.length,a),s.splice(a,1,c),c):(s[a]=c,c)},e.del=function(s,a){if(Array.isArray(s)){s.splice(a,1);return}delete s[a]}}else console.error("[vue-demi] Vue version "+n.version+" is unsupported.");return e}(this.VueDemi=this.VueDemi||(typeof VueDemi!="undefined"?VueDemi:{}),this.Vue||(typeof Vue!="undefined"?Vue:void 0),this.VueCompositionAPI||(typeof VueCompositionAPI!="undefined"?VueCompositionAPI:void 0));(function(e,n,h,l){"use strict";var b=Object.defineProperty,s=Object.getOwnPropertySymbols,a=Object.prototype.hasOwnProperty,c=Object.prototype.propertyIsEnumerable,u=(o,r,t)=>r in o?b(o,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):o[r]=t,C=(o,r)=>{for(var t in r||(r={}))a.call(r,t)&&u(o,t,r[t]);if(s)for(var t of s(r))c.call(r,t)&&u(o,t,r[t]);return o};function g(o){const r=new l(o?o.headers.cookie:null);return(t,{doNotParse:f=!1,autoUpdateDependencies:p=!1}={})=>v(t,{doNotParse:f,autoUpdateDependencies:p},r)}function v(o,{doNotParse:r=!1,autoUpdateDependencies:t=!1}={},f=new l){const p=t?[...o||[]]:o;let w=f.getAll({doNotParse:!0});const y=h.ref(0),_=()=>{const i=f.getAll({doNotParse:!0});d(p||null,i,w)&&y.value++,w=i};return f.addChangeListener(_),n.tryOnScopeDispose(()=>{f.removeChangeListener(_)}),{get:(...i)=>(t&&p&&!p.includes(i[0])&&p.push(i[0]),y.value,f.get(i[0],C({doNotParse:r},i[1]))),getAll:(...i)=>(y.value,f.getAll(C({doNotParse:r},i[0]))),set:(...i)=>f.set(...i),remove:(...i)=>f.remove(...i),addChangeListener:(...i)=>f.addChangeListener(...i),removeChangeListener:(...i)=>f.removeChangeListener(...i)}}function d(o,r,t){if(!o)return!0;for(const f of o)if(r[f]!==t[f])return!0;return!1}e.createCookies=g,e.useCookies=v})(this.VueUse=this.VueUse||{},VueUse,VueDemi,UniversalCookie);
+var VueDemi=function(e,n,h){if(e.install)return e;if(!n)return console.error("[vue-demi] no Vue instance found, please be sure to import `vue` before `vue-demi`."),e;if(n.version.slice(0,4)==="2.7."){let s=function(a,c){var u,C={},g={config:n.config,use:n.use.bind(n),mixin:n.mixin.bind(n),component:n.component.bind(n),provide:function(v,d){return C[v]=d,this},directive:function(v,d){return d?(n.directive(v,d),g):n.directive(v)},mount:function(v,d){return u||(u=new n(Object.assign({propsData:c},a,{provide:Object.assign(C,a.provide)})),u.$mount(v,d),u)},unmount:function(){u&&(u.$destroy(),u=void 0)}};return g};var b=s;for(var l in n)e[l]=n[l];e.isVue2=!0,e.isVue3=!1,e.install=function(){},e.Vue=n,e.Vue2=n,e.version=n.version,e.warn=n.util.warn,e.createApp=s}else if(n.version.slice(0,2)==="2.")if(h){for(var l in h)e[l]=h[l];e.isVue2=!0,e.isVue3=!1,e.install=function(){},e.Vue=n,e.Vue2=n,e.version=n.version}else console.error("[vue-demi] no VueCompositionAPI instance found, please be sure to import `@vue/composition-api` before `vue-demi`.");else if(n.version.slice(0,2)==="3."){for(var l in n)e[l]=n[l];e.isVue2=!1,e.isVue3=!0,e.install=function(){},e.Vue=n,e.Vue2=void 0,e.version=n.version,e.set=function(s,a,c){return Array.isArray(s)?(s.length=Math.max(s.length,a),s.splice(a,1,c),c):(s[a]=c,c)},e.del=function(s,a){if(Array.isArray(s)){s.splice(a,1);return}delete s[a]}}else console.error("[vue-demi] Vue version "+n.version+" is unsupported.");return e}(this.VueDemi=this.VueDemi||(typeof VueDemi<"u"?VueDemi:{}),this.Vue||(typeof Vue<"u"?Vue:void 0),this.VueCompositionAPI||(typeof VueCompositionAPI<"u"?VueCompositionAPI:void 0));(function(e,n,h,l){"use strict";var b=Object.defineProperty,s=Object.getOwnPropertySymbols,a=Object.prototype.hasOwnProperty,c=Object.prototype.propertyIsEnumerable,u=(o,r,t)=>r in o?b(o,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):o[r]=t,C=(o,r)=>{for(var t in r||(r={}))a.call(r,t)&&u(o,t,r[t]);if(s)for(var t of s(r))c.call(r,t)&&u(o,t,r[t]);return o};function g(o){const r=new l(o?o.headers.cookie:null);return(t,{doNotParse:f=!1,autoUpdateDependencies:p=!1}={})=>v(t,{doNotParse:f,autoUpdateDependencies:p},r)}function v(o,{doNotParse:r=!1,autoUpdateDependencies:t=!1}={},f=new l){const p=t?[...o||[]]:o;let w=f.getAll({doNotParse:!0});const y=h.ref(0),_=()=>{const i=f.getAll({doNotParse:!0});d(p||null,i,w)&&y.value++,w=i};return f.addChangeListener(_),n.tryOnScopeDispose(()=>{f.removeChangeListener(_)}),{get:(...i)=>(t&&p&&!p.includes(i[0])&&p.push(i[0]),y.value,f.get(i[0],C({doNotParse:r},i[1]))),getAll:(...i)=>(y.value,f.getAll(C({doNotParse:r},i[0]))),set:(...i)=>f.set(...i),remove:(...i)=>f.remove(...i),addChangeListener:(...i)=>f.addChangeListener(...i),removeChangeListener:(...i)=>f.removeChangeListener(...i)}}function d(o,r,t){if(!o)return!0;for(const f of o)if(r[f]!==t[f])return!0;return!1}e.createCookies=g,e.useCookies=v})(this.VueUse=this.VueUse||{},VueUse,VueDemi,UniversalCookie);

package/useCookies.mjs

@@ -28,7 +28,11 @@ function useCookies(dependencies, { doNotParse = false, autoUpdateDependencies =
   const touches = ref(0);
   const onChange = () => {
     const newCookies = cookies.getAll({ doNotParse: true });
-    if (shouldUpdate(watchingDependencies || null, newCookies, previousCookies))
+    if (shouldUpdate(
+      watchingDependencies || null,
+      newCookies,
+      previousCookies
+    ))
       touches.value++;
     previousCookies = newCookies;
   };
@@ -37,12 +41,18 @@ function useCookies(dependencies, { doNotParse = false, autoUpdateDependencies =
     cookies.removeChangeListener(onChange);
   });
   return {
+    /**
+     * Reactive get cookie by name. If **autoUpdateDependencies = true** then it will update watching dependencies
+     */
     get: (...args) => {
       if (autoUpdateDependencies && watchingDependencies && !watchingDependencies.includes(args[0]))
         watchingDependencies.push(args[0]);
       touches.value;
       return cookies.get(args[0], __spreadValues({ doNotParse }, args[1]));
     },
+    /**
+     * Reactive get all cookies
+     */
     getAll: (...args) => {
       touches.value;
       return cookies.getAll(__spreadValues({ doNotParse }, args[0]));

package/useDrauu.cjs

@@ -86,24 +86,28 @@ function useDrauu(target, options) {
       shiftPressed.value = drauuInstance.value.shiftPressed;
     }
   };
-  vueDemi.watch(() => core.unrefElement(target), (el) => {
-    if (!el || typeof SVGSVGElement === "undefined" || !(el instanceof SVGSVGElement))
-      return;
-    if (drauuInstance.value)
-      cleanup();
-    drauuInstance.value = drauu.createDrauu(__spreadValues({ el }, options));
-    syncStatus();
-    disposables = [
-      drauuInstance.value.on("canceled", () => onCanceledHook.trigger()),
-      drauuInstance.value.on("committed", () => onCommittedHook.trigger()),
-      drauuInstance.value.on("start", () => onStartHook.trigger()),
-      drauuInstance.value.on("end", () => onEndHook.trigger()),
-      drauuInstance.value.on("changed", () => {
-        syncStatus();
-        onChangedHook.trigger();
-      })
-    ];
-  }, { flush: "post" });
+  vueDemi.watch(
+    () => core.unrefElement(target),
+    (el) => {
+      if (!el || typeof SVGSVGElement === "undefined" || !(el instanceof SVGSVGElement))
+        return;
+      if (drauuInstance.value)
+        cleanup();
+      drauuInstance.value = drauu.createDrauu(__spreadValues({ el }, options));
+      syncStatus();
+      disposables = [
+        drauuInstance.value.on("canceled", () => onCanceledHook.trigger()),
+        drauuInstance.value.on("committed", () => onCommittedHook.trigger()),
+        drauuInstance.value.on("start", () => onStartHook.trigger()),
+        drauuInstance.value.on("end", () => onEndHook.trigger()),
+        drauuInstance.value.on("changed", () => {
+          syncStatus();
+          onChangedHook.trigger();
+        })
+      ];
+    },
+    { flush: "post" }
+  );
   shared.tryOnScopeDispose(() => cleanup());
   return {
     drauuInstance,