@vue/runtime-dom 3.5.17 → 3.6.0-alpha.1

package/dist/runtime-dom.global.js

@@ -1,5 +1,5 @@
 /**
-* @vue/runtime-dom v3.5.17
+* @vue/runtime-dom v3.6.0-alpha.1
 * (c) 2018-present Yuxi (Evan) You and Vue contributors
 * @license MIT
 **/
@@ -21,6 +21,8 @@ var VueRuntimeDOM = (function (exports) {
   const NO = () => false;
   const isOn = (key) => key.charCodeAt(0) === 111 && key.charCodeAt(1) === 110 && // uppercase letter
   (key.charCodeAt(2) > 122 || key.charCodeAt(2) < 97);
+  const isNativeOn = (key) => key.charCodeAt(0) === 111 && key.charCodeAt(1) === 110 && // lowercase letter
+  key.charCodeAt(2) > 96 && key.charCodeAt(2) < 123;
   const isModelListener = (key) => key.startsWith("onUpdate:");
   const extend = Object.assign;
   const remove = (arr, el) => {
@@ -54,6 +56,7 @@ var VueRuntimeDOM = (function (exports) {
     // the leading comma is intentional so empty string "" is also included
     ",key,ref,ref_for,ref_key,onVnodeBeforeMount,onVnodeMounted,onVnodeBeforeUpdate,onVnodeUpdated,onVnodeBeforeUnmount,onVnodeUnmounted"
   );
+  const isBuiltInTag = /* @__PURE__ */ makeMap("slot,component");
   const isBuiltInDirective = /* @__PURE__ */ makeMap(
     "bind,cloak,else-if,else,for,html,if,model,on,once,pre,show,slot,text,memo"
   );
@@ -65,10 +68,9 @@ var VueRuntimeDOM = (function (exports) {
     };
   };
   const camelizeRE = /-(\w)/g;
+  const camelizeReplacer = (_, c) => c ? c.toUpperCase() : "";
   const camelize = cacheStringFunction(
-    (str) => {
-      return str.replace(camelizeRE, (_, c) => c ? c.toUpperCase() : "");
-    }
+    (str) => str.replace(camelizeRE, camelizeReplacer)
   );
   const hyphenateRE = /\B([A-Z])/g;
   const hyphenate = cacheStringFunction(
@@ -109,6 +111,10 @@ var VueRuntimeDOM = (function (exports) {
   const getGlobalThis = () => {
     return _globalThis || (_globalThis = typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : {});
   };
+  function canSetValueDirectly(tagName) {
+    return tagName !== "PROGRESS" && // custom elements may use _value internally
+    !tagName.includes("-");
+  }
 
   const GLOBALS_ALLOWED = "Infinity,undefined,NaN,isFinite,isNaN,parseFloat,parseInt,decodeURI,decodeURIComponent,encodeURI,encodeURIComponent,Math,Number,Date,Array,Object,Boolean,String,RegExp,Map,Set,JSON,Intl,BigInt,console,Error,Symbol";
   const isGloballyAllowed = /* @__PURE__ */ makeMap(GLOBALS_ALLOWED);
@@ -216,6 +222,24 @@ var VueRuntimeDOM = (function (exports) {
     const type = typeof value;
     return type === "string" || type === "number" || type === "boolean";
   }
+  function shouldSetAsAttr(tagName, key) {
+    if (key === "spellcheck" || key === "draggable" || key === "translate" || key === "autocorrect") {
+      return true;
+    }
+    if (key === "form") {
+      return true;
+    }
+    if (key === "list" && tagName === "INPUT") {
+      return true;
+    }
+    if (key === "type" && tagName === "TEXTAREA") {
+      return true;
+    }
+    if ((key === "width" || key === "height") && (tagName === "IMG" || tagName === "VIDEO" || tagName === "CANVAS" || tagName === "SOURCE")) {
+      return true;
+    }
+    return false;
+  }
 
   const cssVarNameEscapeSymbolsRE = /[ !"#$%&'()*+,./:;<=>?@[\\\]^`{|}~]/g;
   function getEscapedCssVarName(key, doubleEscape) {
@@ -279,7 +303,20 @@ var VueRuntimeDOM = (function (exports) {
     return !!(val && val["__v_isRef"] === true);
   };
   const toDisplayString = (val) => {
-    return isString(val) ? val : val == null ? "" : isArray(val) || isObject(val) && (val.toString === objectToString || !isFunction(val.toString)) ? isRef$1(val) ? toDisplayString(val.value) : JSON.stringify(val, replacer, 2) : String(val);
+    switch (typeof val) {
+      case "string":
+        return val;
+      case "object":
+        if (val) {
+          if (isRef$1(val)) {
+            return toDisplayString(val.value);
+          } else if (isArray(val) || val.toString === objectToString || !isFunction(val.toString)) {
+            return JSON.stringify(val, replacer, 2);
+          }
+        }
+      default:
+        return val == null ? "" : String(val);
+    }
   };
   const replacer = (_key, val) => {
     if (isRef$1(val)) {
@@ -314,604 +351,407 @@ var VueRuntimeDOM = (function (exports) {
     );
   };
 
-  function warn$2(msg, ...args) {
-    console.warn(`[Vue warn] ${msg}`, ...args);
-  }
-
-  let activeEffectScope;
-  class EffectScope {
-    constructor(detached = false) {
-      this.detached = detached;
-      /**
-       * @internal
-       */
-      this._active = true;
-      /**
-       * @internal track `on` calls, allow `on` call multiple times
-       */
-      this._on = 0;
-      /**
-       * @internal
-       */
-      this.effects = [];
-      /**
-       * @internal
-       */
-      this.cleanups = [];
-      this._isPaused = false;
-      this.parent = activeEffectScope;
-      if (!detached && activeEffectScope) {
-        this.index = (activeEffectScope.scopes || (activeEffectScope.scopes = [])).push(
-          this
-        ) - 1;
-      }
-    }
-    get active() {
-      return this._active;
-    }
-    pause() {
-      if (this._active) {
-        this._isPaused = true;
-        let i, l;
-        if (this.scopes) {
-          for (i = 0, l = this.scopes.length; i < l; i++) {
-            this.scopes[i].pause();
-          }
-        }
-        for (i = 0, l = this.effects.length; i < l; i++) {
-          this.effects[i].pause();
-        }
-      }
-    }
-    /**
-     * Resumes the effect scope, including all child scopes and effects.
-     */
-    resume() {
-      if (this._active) {
-        if (this._isPaused) {
-          this._isPaused = false;
-          let i, l;
-          if (this.scopes) {
-            for (i = 0, l = this.scopes.length; i < l; i++) {
-              this.scopes[i].resume();
-            }
-          }
-          for (i = 0, l = this.effects.length; i < l; i++) {
-            this.effects[i].resume();
-          }
-        }
-      }
-    }
-    run(fn) {
-      if (this._active) {
-        const currentEffectScope = activeEffectScope;
-        try {
-          activeEffectScope = this;
-          return fn();
-        } finally {
-          activeEffectScope = currentEffectScope;
-        }
-      } else {
-        warn$2(`cannot run an inactive effect scope.`);
-      }
-    }
-    /**
-     * This should only be called on non-detached scopes
-     * @internal
-     */
-    on() {
-      if (++this._on === 1) {
-        this.prevScope = activeEffectScope;
-        activeEffectScope = this;
-      }
-    }
-    /**
-     * This should only be called on non-detached scopes
-     * @internal
-     */
-    off() {
-      if (this._on > 0 && --this._on === 0) {
-        activeEffectScope = this.prevScope;
-        this.prevScope = void 0;
-      }
-    }
-    stop(fromParent) {
-      if (this._active) {
-        this._active = false;
-        let i, l;
-        for (i = 0, l = this.effects.length; i < l; i++) {
-          this.effects[i].stop();
-        }
-        this.effects.length = 0;
-        for (i = 0, l = this.cleanups.length; i < l; i++) {
-          this.cleanups[i]();
+  function getSequence(arr) {
+    const p = arr.slice();
+    const result = [0];
+    let i, j, u, v, c;
+    const len = arr.length;
+    for (i = 0; i < len; i++) {
+      const arrI = arr[i];
+      if (arrI !== 0) {
+        j = result[result.length - 1];
+        if (arr[j] < arrI) {
+          p[i] = j;
+          result.push(i);
+          continue;
         }
-        this.cleanups.length = 0;
-        if (this.scopes) {
-          for (i = 0, l = this.scopes.length; i < l; i++) {
-            this.scopes[i].stop(true);
+        u = 0;
+        v = result.length - 1;
+        while (u < v) {
+          c = u + v >> 1;
+          if (arr[result[c]] < arrI) {
+            u = c + 1;
+          } else {
+            v = c;
           }
-          this.scopes.length = 0;
         }
-        if (!this.detached && this.parent && !fromParent) {
-          const last = this.parent.scopes.pop();
-          if (last && last !== this) {
-            this.parent.scopes[this.index] = last;
-            last.index = this.index;
+        if (arrI < arr[result[u]]) {
+          if (u > 0) {
+            p[i] = result[u - 1];
           }
+          result[u] = i;
         }
-        this.parent = void 0;
       }
     }
-  }
-  function effectScope(detached) {
-    return new EffectScope(detached);
-  }
-  function getCurrentScope() {
-    return activeEffectScope;
-  }
-  function onScopeDispose(fn, failSilently = false) {
-    if (activeEffectScope) {
-      activeEffectScope.cleanups.push(fn);
-    } else if (!failSilently) {
-      warn$2(
-        `onScopeDispose() is called when there is no active effect scope to be associated with.`
-      );
+    u = result.length;
+    v = result[u - 1];
+    while (u-- > 0) {
+      result[u] = v;
+      v = p[v];
     }
+    return result;
   }
 
-  let activeSub;
-  const pausedQueueEffects = /* @__PURE__ */ new WeakSet();
-  class ReactiveEffect {
-    constructor(fn) {
-      this.fn = fn;
-      /**
-       * @internal
-       */
-      this.deps = void 0;
-      /**
-       * @internal
-       */
-      this.depsTail = void 0;
-      /**
-       * @internal
-       */
-      this.flags = 1 | 4;
-      /**
-       * @internal
-       */
-      this.next = void 0;
-      /**
-       * @internal
-       */
-      this.cleanup = void 0;
-      this.scheduler = void 0;
-      if (activeEffectScope && activeEffectScope.active) {
-        activeEffectScope.effects.push(this);
-      }
-    }
-    pause() {
-      this.flags |= 64;
-    }
-    resume() {
-      if (this.flags & 64) {
-        this.flags &= -65;
-        if (pausedQueueEffects.has(this)) {
-          pausedQueueEffects.delete(this);
-          this.trigger();
-        }
-      }
-    }
-    /**
-     * @internal
-     */
-    notify() {
-      if (this.flags & 2 && !(this.flags & 32)) {
-        return;
-      }
-      if (!(this.flags & 8)) {
-        batch(this);
-      }
-    }
-    run() {
-      if (!(this.flags & 1)) {
-        return this.fn();
-      }
-      this.flags |= 2;
-      cleanupEffect(this);
-      prepareDeps(this);
-      const prevEffect = activeSub;
-      const prevShouldTrack = shouldTrack;
-      activeSub = this;
-      shouldTrack = true;
-      try {
-        return this.fn();
-      } finally {
-        if (activeSub !== this) {
-          warn$2(
-            "Active effect was not restored correctly - this is likely a Vue internal bug."
-          );
-        }
-        cleanupDeps(this);
-        activeSub = prevEffect;
-        shouldTrack = prevShouldTrack;
-        this.flags &= -3;
-      }
-    }
-    stop() {
-      if (this.flags & 1) {
-        for (let link = this.deps; link; link = link.nextDep) {
-          removeSub(link);
-        }
-        this.deps = this.depsTail = void 0;
-        cleanupEffect(this);
-        this.onStop && this.onStop();
-        this.flags &= -2;
-      }
+  function normalizeCssVarValue(value) {
+    if (value == null) {
+      return "initial";
     }
-    trigger() {
-      if (this.flags & 64) {
-        pausedQueueEffects.add(this);
-      } else if (this.scheduler) {
-        this.scheduler();
-      } else {
-        this.runIfDirty();
-      }
+    if (typeof value === "string") {
+      return value === "" ? " " : value;
     }
-    /**
-     * @internal
-     */
-    runIfDirty() {
-      if (isDirty(this)) {
-        this.run();
+    if (typeof value !== "number" || !Number.isFinite(value)) {
+      {
+        console.warn(
+          "[Vue warn] Invalid value used for CSS binding. Expected a string or a finite number but received:",
+          value
+        );
       }
     }
-    get dirty() {
-      return isDirty(this);
-    }
+    return String(value);
+  }
+
+  function warn$2(msg, ...args) {
+    console.warn(`[Vue warn] ${msg}`, ...args);
   }
+
+  var ReactiveFlags = /* @__PURE__ */ ((ReactiveFlags2) => {
+    ReactiveFlags2[ReactiveFlags2["None"] = 0] = "None";
+    ReactiveFlags2[ReactiveFlags2["Mutable"] = 1] = "Mutable";
+    ReactiveFlags2[ReactiveFlags2["Watching"] = 2] = "Watching";
+    ReactiveFlags2[ReactiveFlags2["RecursedCheck"] = 4] = "RecursedCheck";
+    ReactiveFlags2[ReactiveFlags2["Recursed"] = 8] = "Recursed";
+    ReactiveFlags2[ReactiveFlags2["Dirty"] = 16] = "Dirty";
+    ReactiveFlags2[ReactiveFlags2["Pending"] = 32] = "Pending";
+    return ReactiveFlags2;
+  })(ReactiveFlags || {});
+  const notifyBuffer = [];
   let batchDepth = 0;
-  let batchedSub;
-  let batchedComputed;
-  function batch(sub, isComputed = false) {
-    sub.flags |= 8;
-    if (isComputed) {
-      sub.next = batchedComputed;
-      batchedComputed = sub;
-      return;
+  let activeSub = void 0;
+  let notifyIndex = 0;
+  let notifyBufferLength = 0;
+  function setActiveSub(sub) {
+    try {
+      return activeSub;
+    } finally {
+      activeSub = sub;
     }
-    sub.next = batchedSub;
-    batchedSub = sub;
   }
   function startBatch() {
-    batchDepth++;
+    ++batchDepth;
   }
   function endBatch() {
-    if (--batchDepth > 0) {
-      return;
-    }
-    if (batchedComputed) {
-      let e = batchedComputed;
-      batchedComputed = void 0;
-      while (e) {
-        const next = e.next;
-        e.next = void 0;
-        e.flags &= -9;
-        e = next;
-      }
-    }
-    let error;
-    while (batchedSub) {
-      let e = batchedSub;
-      batchedSub = void 0;
-      while (e) {
-        const next = e.next;
-        e.next = void 0;
-        e.flags &= -9;
-        if (e.flags & 1) {
-          try {
-            ;
-            e.trigger();
-          } catch (err) {
-            if (!error) error = err;
-          }
-        }
-        e = next;
-      }
-    }
-    if (error) throw error;
-  }
-  function prepareDeps(sub) {
-    for (let link = sub.deps; link; link = link.nextDep) {
-      link.version = -1;
-      link.prevActiveLink = link.dep.activeLink;
-      link.dep.activeLink = link;
+    if (!--batchDepth && notifyBufferLength) {
+      flush();
     }
   }
-  function cleanupDeps(sub) {
-    let head;
-    let tail = sub.depsTail;
-    let link = tail;
-    while (link) {
-      const prev = link.prevDep;
-      if (link.version === -1) {
-        if (link === tail) tail = prev;
-        removeSub(link);
-        removeDep(link);
-      } else {
-        head = link;
-      }
-      link.dep.activeLink = link.prevActiveLink;
-      link.prevActiveLink = void 0;
-      link = prev;
+  function link(dep, sub) {
+    const prevDep = sub.depsTail;
+    if (prevDep !== void 0 && prevDep.dep === dep) {
+      return;
     }
-    sub.deps = head;
-    sub.depsTail = tail;
-  }
-  function isDirty(sub) {
-    for (let link = sub.deps; link; link = link.nextDep) {
-      if (link.dep.version !== link.version || link.dep.computed && (refreshComputed(link.dep.computed) || link.dep.version !== link.version)) {
-        return true;
+    let nextDep = void 0;
+    const recursedCheck = sub.flags & 4 /* RecursedCheck */;
+    if (recursedCheck) {
+      nextDep = prevDep !== void 0 ? prevDep.nextDep : sub.deps;
+      if (nextDep !== void 0 && nextDep.dep === dep) {
+        sub.depsTail = nextDep;
+        return;
       }
     }
-    if (sub._dirty) {
-      return true;
-    }
-    return false;
-  }
-  function refreshComputed(computed) {
-    if (computed.flags & 4 && !(computed.flags & 16)) {
+    const prevSub = dep.subsTail;
+    if (prevSub !== void 0 && prevSub.sub === sub && (!recursedCheck || isValidLink(prevSub, sub))) {
       return;
     }
-    computed.flags &= -17;
-    if (computed.globalVersion === globalVersion) {
-      return;
+    const newLink = sub.depsTail = dep.subsTail = {
+      dep,
+      sub,
+      prevDep,
+      nextDep,
+      prevSub,
+      nextSub: void 0
+    };
+    if (nextDep !== void 0) {
+      nextDep.prevDep = newLink;
     }
-    computed.globalVersion = globalVersion;
-    if (!computed.isSSR && computed.flags & 128 && (!computed.deps && !computed._dirty || !isDirty(computed))) {
-      return;
+    if (prevDep !== void 0) {
+      prevDep.nextDep = newLink;
+    } else {
+      sub.deps = newLink;
     }
-    computed.flags |= 2;
-    const dep = computed.dep;
-    const prevSub = activeSub;
-    const prevShouldTrack = shouldTrack;
-    activeSub = computed;
-    shouldTrack = true;
-    try {
-      prepareDeps(computed);
-      const value = computed.fn(computed._value);
-      if (dep.version === 0 || hasChanged(value, computed._value)) {
-        computed.flags |= 128;
-        computed._value = value;
-        dep.version++;
-      }
-    } catch (err) {
-      dep.version++;
-      throw err;
-    } finally {
-      activeSub = prevSub;
-      shouldTrack = prevShouldTrack;
-      cleanupDeps(computed);
-      computed.flags &= -3;
+    if (prevSub !== void 0) {
+      prevSub.nextSub = newLink;
+    } else {
+      dep.subs = newLink;
     }
   }
-  function removeSub(link, soft = false) {
-    const { dep, prevSub, nextSub } = link;
-    if (prevSub) {
-      prevSub.nextSub = nextSub;
-      link.prevSub = void 0;
+  function unlink(link2, sub = link2.sub) {
+    const dep = link2.dep;
+    const prevDep = link2.prevDep;
+    const nextDep = link2.nextDep;
+    const nextSub = link2.nextSub;
+    const prevSub = link2.prevSub;
+    if (nextDep !== void 0) {
+      nextDep.prevDep = prevDep;
+    } else {
+      sub.depsTail = prevDep;
     }
-    if (nextSub) {
-      nextSub.prevSub = prevSub;
-      link.nextSub = void 0;
+    if (prevDep !== void 0) {
+      prevDep.nextDep = nextDep;
+    } else {
+      sub.deps = nextDep;
     }
-    if (dep.subsHead === link) {
-      dep.subsHead = nextSub;
+    if (nextSub !== void 0) {
+      nextSub.prevSub = prevSub;
+    } else {
+      dep.subsTail = prevSub;
     }
-    if (dep.subs === link) {
-      dep.subs = prevSub;
-      if (!prevSub && dep.computed) {
-        dep.computed.flags &= -5;
-        for (let l = dep.computed.deps; l; l = l.nextDep) {
-          removeSub(l, true);
+    if (prevSub !== void 0) {
+      prevSub.nextSub = nextSub;
+    } else if ((dep.subs = nextSub) === void 0) {
+      let toRemove = dep.deps;
+      if (toRemove !== void 0) {
+        do {
+          toRemove = unlink(toRemove, dep);
+        } while (toRemove !== void 0);
+        dep.flags |= 16 /* Dirty */;
+      }
+    }
+    return nextDep;
+  }
+  function propagate(link2) {
+    let next = link2.nextSub;
+    let stack;
+    top: do {
+      const sub = link2.sub;
+      let flags = sub.flags;
+      if (flags & (1 /* Mutable */ | 2 /* Watching */)) {
+        if (!(flags & (4 /* RecursedCheck */ | 8 /* Recursed */ | 16 /* Dirty */ | 32 /* Pending */))) {
+          sub.flags = flags | 32 /* Pending */;
+        } else if (!(flags & (4 /* RecursedCheck */ | 8 /* Recursed */))) {
+          flags = 0 /* None */;
+        } else if (!(flags & 4 /* RecursedCheck */)) {
+          sub.flags = flags & -9 /* Recursed */ | 32 /* Pending */;
+        } else if (!(flags & (16 /* Dirty */ | 32 /* Pending */)) && isValidLink(link2, sub)) {
+          sub.flags = flags | 8 /* Recursed */ | 32 /* Pending */;
+          flags &= 1 /* Mutable */;
+        } else {
+          flags = 0 /* None */;
+        }
+        if (flags & 2 /* Watching */) {
+          notifyBuffer[notifyBufferLength++] = sub;
+        }
+        if (flags & 1 /* Mutable */) {
+          const subSubs = sub.subs;
+          if (subSubs !== void 0) {
+            link2 = subSubs;
+            if (subSubs.nextSub !== void 0) {
+              stack = { value: next, prev: stack };
+              next = link2.nextSub;
+            }
+            continue;
+          }
         }
       }
-    }
-    if (!soft && !--dep.sc && dep.map) {
-      dep.map.delete(dep.key);
-    }
+      if ((link2 = next) !== void 0) {
+        next = link2.nextSub;
+        continue;
+      }
+      while (stack !== void 0) {
+        link2 = stack.value;
+        stack = stack.prev;
+        if (link2 !== void 0) {
+          next = link2.nextSub;
+          continue top;
+        }
+      }
+      break;
+    } while (true);
   }
-  function removeDep(link) {
-    const { prevDep, nextDep } = link;
-    if (prevDep) {
-      prevDep.nextDep = nextDep;
-      link.prevDep = void 0;
-    }
-    if (nextDep) {
-      nextDep.prevDep = prevDep;
-      link.nextDep = void 0;
-    }
+  function startTracking(sub) {
+    sub.depsTail = void 0;
+    sub.flags = sub.flags & -57 | 4 /* RecursedCheck */;
+    return setActiveSub(sub);
   }
-  function effect(fn, options) {
-    if (fn.effect instanceof ReactiveEffect) {
-      fn = fn.effect.fn;
-    }
-    const e = new ReactiveEffect(fn);
-    if (options) {
-      extend(e, options);
+  function endTracking(sub, prevSub) {
+    if (activeSub !== sub) {
+      warn$2(
+        "Active effect was not restored correctly - this is likely a Vue internal bug."
+      );
     }
-    try {
-      e.run();
-    } catch (err) {
-      e.stop();
-      throw err;
-    }
-    const runner = e.run.bind(e);
-    runner.effect = e;
-    return runner;
-  }
-  function stop(runner) {
-    runner.effect.stop();
-  }
-  let shouldTrack = true;
-  const trackStack = [];
-  function pauseTracking() {
-    trackStack.push(shouldTrack);
-    shouldTrack = false;
-  }
-  function resetTracking() {
-    const last = trackStack.pop();
-    shouldTrack = last === void 0 ? true : last;
-  }
-  function cleanupEffect(e) {
-    const { cleanup } = e;
-    e.cleanup = void 0;
-    if (cleanup) {
-      const prevSub = activeSub;
-      activeSub = void 0;
-      try {
-        cleanup();
-      } finally {
-        activeSub = prevSub;
-      }
+    activeSub = prevSub;
+    const depsTail = sub.depsTail;
+    let toRemove = depsTail !== void 0 ? depsTail.nextDep : sub.deps;
+    while (toRemove !== void 0) {
+      toRemove = unlink(toRemove, sub);
+    }
+    sub.flags &= -5 /* RecursedCheck */;
+  }
+  function flush() {
+    while (notifyIndex < notifyBufferLength) {
+      const effect = notifyBuffer[notifyIndex];
+      notifyBuffer[notifyIndex++] = void 0;
+      effect.notify();
+    }
+    notifyIndex = 0;
+    notifyBufferLength = 0;
+  }
+  function checkDirty(link2, sub) {
+    let stack;
+    let checkDepth = 0;
+    top: do {
+      const dep = link2.dep;
+      const depFlags = dep.flags;
+      let dirty = false;
+      if (sub.flags & 16 /* Dirty */) {
+        dirty = true;
+      } else if ((depFlags & (1 /* Mutable */ | 16 /* Dirty */)) === (1 /* Mutable */ | 16 /* Dirty */)) {
+        if (dep.update()) {
+          const subs = dep.subs;
+          if (subs.nextSub !== void 0) {
+            shallowPropagate(subs);
+          }
+          dirty = true;
+        }
+      } else if ((depFlags & (1 /* Mutable */ | 32 /* Pending */)) === (1 /* Mutable */ | 32 /* Pending */)) {
+        if (link2.nextSub !== void 0 || link2.prevSub !== void 0) {
+          stack = { value: link2, prev: stack };
+        }
+        link2 = dep.deps;
+        sub = dep;
+        ++checkDepth;
+        continue;
+      }
+      if (!dirty && link2.nextDep !== void 0) {
+        link2 = link2.nextDep;
+        continue;
+      }
+      while (checkDepth) {
+        --checkDepth;
+        const firstSub = sub.subs;
+        const hasMultipleSubs = firstSub.nextSub !== void 0;
+        if (hasMultipleSubs) {
+          link2 = stack.value;
+          stack = stack.prev;
+        } else {
+          link2 = firstSub;
+        }
+        if (dirty) {
+          if (sub.update()) {
+            if (hasMultipleSubs) {
+              shallowPropagate(firstSub);
+            }
+            sub = link2.sub;
+            continue;
+          }
+        } else {
+          sub.flags &= -33 /* Pending */;
+        }
+        sub = link2.sub;
+        if (link2.nextDep !== void 0) {
+          link2 = link2.nextDep;
+          continue top;
+        }
+        dirty = false;
+      }
+      return dirty;
+    } while (true);
+  }
+  function shallowPropagate(link2) {
+    do {
+      const sub = link2.sub;
+      const nextSub = link2.nextSub;
+      const subFlags = sub.flags;
+      if ((subFlags & (32 /* Pending */ | 16 /* Dirty */)) === 32 /* Pending */) {
+        sub.flags = subFlags | 16 /* Dirty */;
+      }
+      link2 = nextSub;
+    } while (link2 !== void 0);
+  }
+  function isValidLink(checkLink, sub) {
+    const depsTail = sub.depsTail;
+    if (depsTail !== void 0) {
+      let link2 = sub.deps;
+      do {
+        if (link2 === checkLink) {
+          return true;
+        }
+        if (link2 === depsTail) {
+          break;
+        }
+        link2 = link2.nextDep;
+      } while (link2 !== void 0);
     }
+    return false;
   }
 
-  let globalVersion = 0;
-  class Link {
-    constructor(sub, dep) {
-      this.sub = sub;
-      this.dep = dep;
-      this.version = dep.version;
-      this.nextDep = this.prevDep = this.nextSub = this.prevSub = this.prevActiveLink = void 0;
+  const triggerEventInfos = [];
+  function onTrack(sub, debugInfo) {
+    if (sub.onTrack) {
+      sub.onTrack(
+        extend(
+          {
+            effect: sub
+          },
+          debugInfo
+        )
+      );
     }
   }
-  class Dep {
-    // TODO isolatedDeclarations "__v_skip"
-    constructor(computed) {
-      this.computed = computed;
-      this.version = 0;
-      /**
-       * Link between this dep and the current active effect
-       */
-      this.activeLink = void 0;
-      /**
-       * Doubly linked list representing the subscribing effects (tail)
-       */
-      this.subs = void 0;
-      /**
-       * For object property deps cleanup
-       */
-      this.map = void 0;
-      this.key = void 0;
-      /**
-       * Subscriber counter
-       */
-      this.sc = 0;
-      /**
-       * @internal
-       */
-      this.__v_skip = true;
-      {
-        this.subsHead = void 0;
-      }
-    }
-    track(debugInfo) {
-      if (!activeSub || !shouldTrack || activeSub === this.computed) {
-        return;
-      }
-      let link = this.activeLink;
-      if (link === void 0 || link.sub !== activeSub) {
-        link = this.activeLink = new Link(activeSub, this);
-        if (!activeSub.deps) {
-          activeSub.deps = activeSub.depsTail = link;
-        } else {
-          link.prevDep = activeSub.depsTail;
-          activeSub.depsTail.nextDep = link;
-          activeSub.depsTail = link;
-        }
-        addSub(link);
-      } else if (link.version === -1) {
-        link.version = this.version;
-        if (link.nextDep) {
-          const next = link.nextDep;
-          next.prevDep = link.prevDep;
-          if (link.prevDep) {
-            link.prevDep.nextDep = next;
-          }
-          link.prevDep = activeSub.depsTail;
-          link.nextDep = void 0;
-          activeSub.depsTail.nextDep = link;
-          activeSub.depsTail = link;
-          if (activeSub.deps === link) {
-            activeSub.deps = next;
-          }
-        }
-      }
-      if (activeSub.onTrack) {
-        activeSub.onTrack(
-          extend(
-            {
-              effect: activeSub
-            },
-            debugInfo
-          )
-        );
-      }
-      return link;
-    }
-    trigger(debugInfo) {
-      this.version++;
-      globalVersion++;
-      this.notify(debugInfo);
+  function onTrigger(sub) {
+    if (sub.onTrigger) {
+      const debugInfo = triggerEventInfos[triggerEventInfos.length - 1];
+      sub.onTrigger(
+        extend(
+          {
+            effect: sub
+          },
+          debugInfo
+        )
+      );
     }
-    notify(debugInfo) {
-      startBatch();
-      try {
-        if (true) {
-          for (let head = this.subsHead; head; head = head.nextSub) {
-            if (head.sub.onTrigger && !(head.sub.flags & 8)) {
-              head.sub.onTrigger(
-                extend(
-                  {
-                    effect: head.sub
-                  },
-                  debugInfo
-                )
-              );
-            }
-          }
-        }
-        for (let link = this.subs; link; link = link.prevSub) {
-          if (link.sub.notify()) {
-            ;
-            link.sub.dep.notify();
-          }
-        }
-      } finally {
-        endBatch();
+  }
+  function setupOnTrigger(target) {
+    Object.defineProperty(target.prototype, "onTrigger", {
+      get() {
+        return this._onTrigger;
+      },
+      set(val) {
+        if (val && !this._onTrigger) setupFlagsHandler(this);
+        this._onTrigger = val;
       }
-    }
+    });
   }
-  function addSub(link) {
-    link.dep.sc++;
-    if (link.sub.flags & 4) {
-      const computed = link.dep.computed;
-      if (computed && !link.dep.subs) {
-        computed.flags |= 4 | 16;
-        for (let l = computed.deps; l; l = l.nextDep) {
-          addSub(l);
+  function setupFlagsHandler(target) {
+    target._flags = target.flags;
+    Object.defineProperty(target, "flags", {
+      get() {
+        return target._flags;
+      },
+      set(value) {
+        if (!(target._flags & (ReactiveFlags.Dirty | ReactiveFlags.Pending)) && !!(value & (ReactiveFlags.Dirty | ReactiveFlags.Pending))) {
+          onTrigger(this);
         }
+        target._flags = value;
       }
-      const currentTail = link.dep.subs;
-      if (currentTail !== link) {
-        link.prevSub = currentTail;
-        if (currentTail) currentTail.nextSub = link;
-      }
-      if (link.dep.subsHead === void 0) {
-        link.dep.subsHead = link;
+    });
+  }
+
+  class Dep {
+    constructor(map, key) {
+      this.map = map;
+      this.key = key;
+      this._subs = void 0;
+      this.subsTail = void 0;
+      this.flags = ReactiveFlags.None;
+    }
+    get subs() {
+      return this._subs;
+    }
+    set subs(value) {
+      this._subs = value;
+      if (value === void 0) {
+        this.map.delete(this.key);
       }
-      link.dep.subs = link;
     }
   }
   const targetMap = /* @__PURE__ */ new WeakMap();
@@ -925,36 +765,34 @@ var VueRuntimeDOM = (function (exports) {
     "Array iterate" 
   );
   function track(target, type, key) {
-    if (shouldTrack && activeSub) {
+    if (activeSub !== void 0) {
       let depsMap = targetMap.get(target);
       if (!depsMap) {
         targetMap.set(target, depsMap = /* @__PURE__ */ new Map());
       }
       let dep = depsMap.get(key);
       if (!dep) {
-        depsMap.set(key, dep = new Dep());
-        dep.map = depsMap;
-        dep.key = key;
+        depsMap.set(key, dep = new Dep(depsMap, key));
       }
       {
-        dep.track({
+        onTrack(activeSub, {
           target,
           type,
           key
         });
       }
+      link(dep, activeSub);
     }
   }
   function trigger(target, type, key, newValue, oldValue, oldTarget) {
     const depsMap = targetMap.get(target);
     if (!depsMap) {
-      globalVersion++;
       return;
     }
     const run = (dep) => {
-      if (dep) {
+      if (dep !== void 0 && dep.subs !== void 0) {
         {
-          dep.trigger({
+          triggerEventInfos.push({
             target,
             type,
             key,
@@ -963,6 +801,11 @@ var VueRuntimeDOM = (function (exports) {
             oldTarget
           });
         }
+        propagate(dep.subs);
+        shallowPropagate(dep.subs);
+        {
+          triggerEventInfos.pop();
+        }
       }
     };
     startBatch();
@@ -1187,11 +1030,11 @@ var VueRuntimeDOM = (function (exports) {
     return res;
   }
   function noTracking(self, method, args = []) {
-    pauseTracking();
     startBatch();
+    const prevSub = setActiveSub();
     const res = toRaw(self)[method].apply(self, args);
+    setActiveSub(prevSub);
     endBatch();
-    resetTracking();
     return res;
   }
 
@@ -1237,14 +1080,18 @@ var VueRuntimeDOM = (function (exports) {
           return hasOwnProperty;
         }
       }
+      const wasRef = isRef(target);
       const res = Reflect.get(
         target,
         key,
         // if this is a proxy wrapping a ref, return methods using the raw ref
         // as receiver so that we don't have to call `toRaw` on the ref in all
         // its class methods
-        isRef(target) ? target : receiver
+        wasRef ? target : receiver
       );
+      if (wasRef && key !== "value") {
+        return res;
+      }
       if (isSymbol(key) ? builtInSymbols.has(key) : isNonTrackableKeys(key)) {
         return res;
       }
@@ -1696,33 +1543,47 @@ var VueRuntimeDOM = (function (exports) {
     return r ? r["__v_isRef"] === true : false;
   }
   function ref(value) {
-    return createRef(value, false);
+    return createRef(value, toReactive);
   }
   function shallowRef(value) {
-    return createRef(value, true);
+    return createRef(value);
   }
-  function createRef(rawValue, shallow) {
+  function createRef(rawValue, wrap) {
     if (isRef(rawValue)) {
       return rawValue;
     }
-    return new RefImpl(rawValue, shallow);
+    return new RefImpl(rawValue, wrap);
   }
   class RefImpl {
-    constructor(value, isShallow2) {
-      this.dep = new Dep();
-      this["__v_isRef"] = true;
-      this["__v_isShallow"] = false;
-      this._rawValue = isShallow2 ? value : toRaw(value);
-      this._value = isShallow2 ? value : toReactive(value);
-      this["__v_isShallow"] = isShallow2;
+    // TODO isolatedDeclarations "__v_isShallow"
+    constructor(value, wrap) {
+      this.subs = void 0;
+      this.subsTail = void 0;
+      this.flags = ReactiveFlags.Mutable;
+      /**
+       * @internal
+       */
+      this.__v_isRef = true;
+      // TODO isolatedDeclarations "__v_isRef"
+      /**
+       * @internal
+       */
+      this.__v_isShallow = false;
+      this._oldValue = this._rawValue = wrap ? toRaw(value) : value;
+      this._value = wrap ? wrap(value) : value;
+      this._wrap = wrap;
+      this["__v_isShallow"] = !wrap;
+    }
+    get dep() {
+      return this;
     }
     get value() {
-      {
-        this.dep.track({
-          target: this,
-          type: "get",
-          key: "value"
-        });
+      trackRef(this);
+      if (this.flags & ReactiveFlags.Dirty && this.update()) {
+        const subs = this.subs;
+        if (subs !== void 0) {
+          shallowPropagate(subs);
+        }
       }
       return this._value;
     }
@@ -1731,30 +1592,55 @@ var VueRuntimeDOM = (function (exports) {
       const useDirectValue = this["__v_isShallow"] || isShallow(newValue) || isReadonly(newValue);
       newValue = useDirectValue ? newValue : toRaw(newValue);
       if (hasChanged(newValue, oldValue)) {
+        this.flags |= ReactiveFlags.Dirty;
         this._rawValue = newValue;
-        this._value = useDirectValue ? newValue : toReactive(newValue);
-        {
-          this.dep.trigger({
-            target: this,
-            type: "set",
-            key: "value",
-            newValue,
-            oldValue
-          });
+        this._value = !useDirectValue && this._wrap ? this._wrap(newValue) : newValue;
+        const subs = this.subs;
+        if (subs !== void 0) {
+          {
+            triggerEventInfos.push({
+              target: this,
+              type: "set",
+              key: "value",
+              newValue,
+              oldValue
+            });
+          }
+          propagate(subs);
+          if (!batchDepth) {
+            flush();
+          }
+          {
+            triggerEventInfos.pop();
+          }
         }
       }
     }
+    update() {
+      this.flags &= ~ReactiveFlags.Dirty;
+      return hasChanged(this._oldValue, this._oldValue = this._rawValue);
+    }
   }
   function triggerRef(ref2) {
-    if (ref2.dep) {
+    const dep = ref2.dep;
+    if (dep !== void 0 && dep.subs !== void 0) {
+      propagate(dep.subs);
+      shallowPropagate(dep.subs);
+      if (!batchDepth) {
+        flush();
+      }
+    }
+  }
+  function trackRef(dep) {
+    if (activeSub !== void 0) {
       {
-        ref2.dep.trigger({
-          target: ref2,
-          type: "set",
-          key: "value",
-          newValue: ref2._value
+        onTrack(activeSub, {
+          target: dep,
+          type: "get",
+          key: "value"
         });
       }
+      link(dep, activeSub);
     }
   }
   function unref(ref2) {
@@ -1780,13 +1666,21 @@ var VueRuntimeDOM = (function (exports) {
   }
   class CustomRefImpl {
     constructor(factory) {
+      this.subs = void 0;
+      this.subsTail = void 0;
+      this.flags = ReactiveFlags.None;
       this["__v_isRef"] = true;
       this._value = void 0;
-      const dep = this.dep = new Dep();
-      const { get, set } = factory(dep.track.bind(dep), dep.trigger.bind(dep));
+      const { get, set } = factory(
+        () => trackRef(this),
+        () => triggerRef(this)
+      );
       this._get = get;
       this._set = set;
     }
+    get dep() {
+      return this;
+    }
     get value() {
       return this._value = this._get();
     }
@@ -1798,9 +1692,6 @@ var VueRuntimeDOM = (function (exports) {
     return new CustomRefImpl(factory);
   }
   function toRefs(object) {
-    if (!isProxy(object)) {
-      warn$2(`toRefs() expects a reactive object but received a plain one.`);
-    }
     const ret = isArray(object) ? new Array(object.length) : {};
     for (const key in object) {
       ret[key] = propertyToRef(object, key);
@@ -1853,69 +1744,333 @@ var VueRuntimeDOM = (function (exports) {
     return isRef(val) ? val : new ObjectRefImpl(source, key, defaultValue);
   }
 
-  class ComputedRefImpl {
-    constructor(fn, setter, isSSR) {
-      this.fn = fn;
-      this.setter = setter;
-      /**
-       * @internal
-       */
-      this._value = void 0;
-      /**
-       * @internal
-       */
-      this.dep = new Dep(this);
+  class ReactiveEffect {
+    constructor(fn) {
+      this.deps = void 0;
+      this.depsTail = void 0;
+      this.subs = void 0;
+      this.subsTail = void 0;
+      this.flags = ReactiveFlags.Watching | ReactiveFlags.Dirty;
       /**
        * @internal
        */
-      this.__v_isRef = true;
-      // TODO isolatedDeclarations "__v_isReadonly"
-      // A computed is also a subscriber that tracks other deps
+      this.cleanups = [];
       /**
        * @internal
        */
+      this.cleanupsLength = 0;
+      if (fn !== void 0) {
+        this.fn = fn;
+      }
+      if (activeEffectScope) {
+        link(this, activeEffectScope);
+      }
+    }
+    // @ts-expect-error
+    fn() {
+    }
+    get active() {
+      return !(this.flags & 1024);
+    }
+    pause() {
+      this.flags |= 256;
+    }
+    resume() {
+      const flags = this.flags &= -257;
+      if (flags & (ReactiveFlags.Dirty | ReactiveFlags.Pending)) {
+        this.notify();
+      }
+    }
+    notify() {
+      if (!(this.flags & 256) && this.dirty) {
+        this.run();
+      }
+    }
+    run() {
+      if (!this.active) {
+        return this.fn();
+      }
+      cleanup(this);
+      const prevSub = startTracking(this);
+      try {
+        return this.fn();
+      } finally {
+        endTracking(this, prevSub);
+        const flags = this.flags;
+        if ((flags & (ReactiveFlags.Recursed | 128)) === (ReactiveFlags.Recursed | 128)) {
+          this.flags = flags & ~ReactiveFlags.Recursed;
+          this.notify();
+        }
+      }
+    }
+    stop() {
+      if (!this.active) {
+        return;
+      }
+      this.flags = 1024;
+      let dep = this.deps;
+      while (dep !== void 0) {
+        dep = unlink(dep, this);
+      }
+      const sub = this.subs;
+      if (sub !== void 0) {
+        unlink(sub);
+      }
+      cleanup(this);
+    }
+    get dirty() {
+      const flags = this.flags;
+      if (flags & ReactiveFlags.Dirty) {
+        return true;
+      }
+      if (flags & ReactiveFlags.Pending) {
+        if (checkDirty(this.deps, this)) {
+          this.flags = flags | ReactiveFlags.Dirty;
+          return true;
+        } else {
+          this.flags = flags & ~ReactiveFlags.Pending;
+        }
+      }
+      return false;
+    }
+  }
+  {
+    setupOnTrigger(ReactiveEffect);
+  }
+  function effect(fn, options) {
+    if (fn.effect instanceof ReactiveEffect) {
+      fn = fn.effect.fn;
+    }
+    const e = new ReactiveEffect(fn);
+    if (options) {
+      const { onStop, scheduler } = options;
+      if (onStop) {
+        options.onStop = void 0;
+        const stop2 = e.stop.bind(e);
+        e.stop = () => {
+          stop2();
+          onStop();
+        };
+      }
+      if (scheduler) {
+        options.scheduler = void 0;
+        e.notify = () => {
+          if (!(e.flags & 256)) {
+            scheduler();
+          }
+        };
+      }
+      extend(e, options);
+    }
+    try {
+      e.run();
+    } catch (err) {
+      e.stop();
+      throw err;
+    }
+    const runner = e.run.bind(e);
+    runner.effect = e;
+    return runner;
+  }
+  function stop(runner) {
+    runner.effect.stop();
+  }
+  function cleanup(sub) {
+    const l = sub.cleanupsLength;
+    if (l) {
+      for (let i = 0; i < l; i++) {
+        sub.cleanups[i]();
+      }
+      sub.cleanupsLength = 0;
+    }
+  }
+
+  let activeEffectScope;
+  class EffectScope {
+    constructor(detached = false) {
       this.deps = void 0;
+      this.depsTail = void 0;
+      this.subs = void 0;
+      this.subsTail = void 0;
+      this.flags = 0;
       /**
        * @internal
        */
-      this.depsTail = void 0;
+      this.cleanups = [];
       /**
        * @internal
        */
-      this.flags = 16;
+      this.cleanupsLength = 0;
+      if (!detached && activeEffectScope) {
+        link(this, activeEffectScope);
+      }
+    }
+    get active() {
+      return !(this.flags & 1024);
+    }
+    pause() {
+      if (!(this.flags & 256)) {
+        this.flags |= 256;
+        for (let link2 = this.deps; link2 !== void 0; link2 = link2.nextDep) {
+          const dep = link2.dep;
+          if ("pause" in dep) {
+            dep.pause();
+          }
+        }
+      }
+    }
+    /**
+     * Resumes the effect scope, including all child scopes and effects.
+     */
+    resume() {
+      const flags = this.flags;
+      if (flags & 256) {
+        this.flags = flags & -257;
+        for (let link2 = this.deps; link2 !== void 0; link2 = link2.nextDep) {
+          const dep = link2.dep;
+          if ("resume" in dep) {
+            dep.resume();
+          }
+        }
+      }
+    }
+    run(fn) {
+      const prevSub = setActiveSub();
+      const prevScope = activeEffectScope;
+      try {
+        activeEffectScope = this;
+        return fn();
+      } finally {
+        activeEffectScope = prevScope;
+        setActiveSub(prevSub);
+      }
+    }
+    stop() {
+      if (!this.active) {
+        return;
+      }
+      this.flags = 1024;
+      let dep = this.deps;
+      while (dep !== void 0) {
+        const node = dep.dep;
+        if ("stop" in node) {
+          dep = dep.nextDep;
+          node.stop();
+        } else {
+          dep = unlink(dep, this);
+        }
+      }
+      const sub = this.subs;
+      if (sub !== void 0) {
+        unlink(sub);
+      }
+      cleanup(this);
+    }
+  }
+  function effectScope(detached) {
+    return new EffectScope(detached);
+  }
+  function getCurrentScope() {
+    return activeEffectScope;
+  }
+  function setCurrentScope(scope) {
+    try {
+      return activeEffectScope;
+    } finally {
+      activeEffectScope = scope;
+    }
+  }
+  function onScopeDispose(fn, failSilently = false) {
+    if (activeEffectScope !== void 0) {
+      activeEffectScope.cleanups[activeEffectScope.cleanupsLength++] = fn;
+    } else if (!failSilently) {
+      warn$2(
+        `onScopeDispose() is called when there is no active effect scope to be associated with.`
+      );
+    }
+  }
+
+  class ComputedRefImpl {
+    constructor(fn, setter) {
+      this.fn = fn;
+      this.setter = setter;
       /**
        * @internal
        */
-      this.globalVersion = globalVersion - 1;
+      this._value = void 0;
+      this.subs = void 0;
+      this.subsTail = void 0;
+      this.deps = void 0;
+      this.depsTail = void 0;
+      this.flags = ReactiveFlags.Mutable | ReactiveFlags.Dirty;
       /**
        * @internal
        */
-      this.next = void 0;
-      // for backwards compat
-      this.effect = this;
+      this.__v_isRef = true;
       this["__v_isReadonly"] = !setter;
-      this.isSSR = isSSR;
+    }
+    // TODO isolatedDeclarations "__v_isReadonly"
+    // for backwards compat
+    get effect() {
+      return this;
+    }
+    // for backwards compat
+    get dep() {
+      return this;
     }
     /**
      * @internal
+     * for backwards compat
      */
-    notify() {
-      this.flags |= 16;
-      if (!(this.flags & 8) && // avoid infinite self recursion
-      activeSub !== this) {
-        batch(this, true);
+    get _dirty() {
+      const flags = this.flags;
+      if (flags & ReactiveFlags.Dirty) {
         return true;
       }
+      if (flags & ReactiveFlags.Pending) {
+        if (checkDirty(this.deps, this)) {
+          this.flags = flags | ReactiveFlags.Dirty;
+          return true;
+        } else {
+          this.flags = flags & ~ReactiveFlags.Pending;
+        }
+      }
+      return false;
+    }
+    /**
+     * @internal
+     * for backwards compat
+     */
+    set _dirty(v) {
+      if (v) {
+        this.flags |= ReactiveFlags.Dirty;
+      } else {
+        this.flags &= ~(ReactiveFlags.Dirty | ReactiveFlags.Pending);
+      }
     }
     get value() {
-      const link = this.dep.track({
-        target: this,
-        type: "get",
-        key: "value"
-      }) ;
-      refreshComputed(this);
-      if (link) {
-        link.version = this.dep.version;
+      const flags = this.flags;
+      if (flags & ReactiveFlags.Dirty || flags & ReactiveFlags.Pending && checkDirty(this.deps, this)) {
+        if (this.update()) {
+          const subs = this.subs;
+          if (subs !== void 0) {
+            shallowPropagate(subs);
+          }
+        }
+      } else if (flags & ReactiveFlags.Pending) {
+        this.flags = flags & ~ReactiveFlags.Pending;
+      }
+      if (activeSub !== void 0) {
+        {
+          onTrack(activeSub, {
+            target: this,
+            type: "get",
+            key: "value"
+          });
+        }
+        link(this, activeSub);
+      } else if (activeEffectScope !== void 0) {
+        link(this, activeEffectScope);
       }
       return this._value;
     }
@@ -1926,6 +2081,23 @@ var VueRuntimeDOM = (function (exports) {
         warn$2("Write operation failed: computed value is readonly");
       }
     }
+    update() {
+      const prevSub = startTracking(this);
+      try {
+        const oldValue = this._value;
+        const newValue = this.fn(oldValue);
+        if (hasChanged(oldValue, newValue)) {
+          this._value = newValue;
+          return true;
+        }
+        return false;
+      } finally {
+        endTracking(this, prevSub);
+      }
+    }
+  }
+  {
+    setupOnTrigger(ComputedRefImpl);
   }
   function computed$1(getterOrOptions, debugOptions, isSSR = false) {
     let getter;
@@ -1936,7 +2108,7 @@ var VueRuntimeDOM = (function (exports) {
       getter = getterOrOptions.get;
       setter = getterOrOptions.set;
     }
-    const cRef = new ComputedRefImpl(getter, setter, isSSR);
+    const cRef = new ComputedRefImpl(getter, setter);
     if (debugOptions && !isSSR) {
       cRef.onTrack = debugOptions.onTrack;
       cRef.onTrigger = debugOptions.onTrigger;
@@ -1957,177 +2129,146 @@ var VueRuntimeDOM = (function (exports) {
   };
 
   const INITIAL_WATCHER_VALUE = {};
-  const cleanupMap = /* @__PURE__ */ new WeakMap();
   let activeWatcher = void 0;
   function getCurrentWatcher() {
     return activeWatcher;
   }
   function onWatcherCleanup(cleanupFn, failSilently = false, owner = activeWatcher) {
     if (owner) {
-      let cleanups = cleanupMap.get(owner);
-      if (!cleanups) cleanupMap.set(owner, cleanups = []);
-      cleanups.push(cleanupFn);
+      const { call } = owner.options;
+      if (call) {
+        owner.cleanups[owner.cleanupsLength++] = () => call(cleanupFn, 4);
+      } else {
+        owner.cleanups[owner.cleanupsLength++] = cleanupFn;
+      }
     } else if (!failSilently) {
       warn$2(
         `onWatcherCleanup() was called when there was no active watcher to associate with.`
       );
     }
   }
-  function watch$1(source, cb, options = EMPTY_OBJ) {
-    const { immediate, deep, once, scheduler, augmentJob, call } = options;
-    const warnInvalidSource = (s) => {
-      (options.onWarn || warn$2)(
-        `Invalid watch source: `,
-        s,
-        `A watch source can only be a getter/effect function, a ref, a reactive object, or an array of these types.`
-      );
-    };
-    const reactiveGetter = (source2) => {
-      if (deep) return source2;
-      if (isShallow(source2) || deep === false || deep === 0)
-        return traverse(source2, 1);
-      return traverse(source2);
-    };
-    let effect;
-    let getter;
-    let cleanup;
-    let boundCleanup;
-    let forceTrigger = false;
-    let isMultiSource = false;
-    if (isRef(source)) {
-      getter = () => source.value;
-      forceTrigger = isShallow(source);
-    } else if (isReactive(source)) {
-      getter = () => reactiveGetter(source);
-      forceTrigger = true;
-    } else if (isArray(source)) {
-      isMultiSource = true;
-      forceTrigger = source.some((s) => isReactive(s) || isShallow(s));
-      getter = () => source.map((s) => {
-        if (isRef(s)) {
-          return s.value;
-        } else if (isReactive(s)) {
-          return reactiveGetter(s);
-        } else if (isFunction(s)) {
-          return call ? call(s, 2) : s();
+  class WatcherEffect extends ReactiveEffect {
+    constructor(source, cb, options = EMPTY_OBJ) {
+      const { deep, once, call, onWarn } = options;
+      let getter;
+      let forceTrigger = false;
+      let isMultiSource = false;
+      if (isRef(source)) {
+        getter = () => source.value;
+        forceTrigger = isShallow(source);
+      } else if (isReactive(source)) {
+        getter = () => reactiveGetter(source, deep);
+        forceTrigger = true;
+      } else if (isArray(source)) {
+        isMultiSource = true;
+        forceTrigger = source.some((s) => isReactive(s) || isShallow(s));
+        getter = () => source.map((s) => {
+          if (isRef(s)) {
+            return s.value;
+          } else if (isReactive(s)) {
+            return reactiveGetter(s, deep);
+          } else if (isFunction(s)) {
+            return call ? call(s, 2) : s();
+          } else {
+            warnInvalidSource(s, onWarn);
+          }
+        });
+      } else if (isFunction(source)) {
+        if (cb) {
+          getter = call ? () => call(source, 2) : source;
         } else {
-          warnInvalidSource(s);
-        }
-      });
-    } else if (isFunction(source)) {
-      if (cb) {
-        getter = call ? () => call(source, 2) : source;
-      } else {
-        getter = () => {
-          if (cleanup) {
-            pauseTracking();
+          getter = () => {
+            if (this.cleanupsLength) {
+              const prevSub = setActiveSub();
+              try {
+                cleanup(this);
+              } finally {
+                setActiveSub(prevSub);
+              }
+            }
+            const currentEffect = activeWatcher;
+            activeWatcher = this;
             try {
-              cleanup();
+              return call ? call(source, 3, [
+                this.boundCleanup
+              ]) : source(this.boundCleanup);
             } finally {
-              resetTracking();
+              activeWatcher = currentEffect;
             }
-          }
-          const currentEffect = activeWatcher;
-          activeWatcher = effect;
-          try {
-            return call ? call(source, 3, [boundCleanup]) : source(boundCleanup);
-          } finally {
-            activeWatcher = currentEffect;
-          }
-        };
-      }
-    } else {
-      getter = NOOP;
-      warnInvalidSource(source);
-    }
-    if (cb && deep) {
-      const baseGetter = getter;
-      const depth = deep === true ? Infinity : deep;
-      getter = () => traverse(baseGetter(), depth);
-    }
-    const scope = getCurrentScope();
-    const watchHandle = () => {
-      effect.stop();
-      if (scope && scope.active) {
-        remove(scope.effects, effect);
-      }
-    };
-    if (once && cb) {
-      const _cb = cb;
-      cb = (...args) => {
-        _cb(...args);
-        watchHandle();
-      };
-    }
-    let oldValue = isMultiSource ? new Array(source.length).fill(INITIAL_WATCHER_VALUE) : INITIAL_WATCHER_VALUE;
-    const job = (immediateFirstRun) => {
-      if (!(effect.flags & 1) || !effect.dirty && !immediateFirstRun) {
-        return;
-      }
-      if (cb) {
-        const newValue = effect.run();
-        if (deep || forceTrigger || (isMultiSource ? newValue.some((v, i) => hasChanged(v, oldValue[i])) : hasChanged(newValue, oldValue))) {
-          if (cleanup) {
-            cleanup();
-          }
-          const currentWatcher = activeWatcher;
-          activeWatcher = effect;
-          try {
-            const args = [
-              newValue,
-              // pass undefined as the old value when it's changed for the first time
-              oldValue === INITIAL_WATCHER_VALUE ? void 0 : isMultiSource && oldValue[0] === INITIAL_WATCHER_VALUE ? [] : oldValue,
-              boundCleanup
-            ];
-            oldValue = newValue;
-            call ? call(cb, 3, args) : (
-              // @ts-expect-error
-              cb(...args)
-            );
-          } finally {
-            activeWatcher = currentWatcher;
-          }
+          };
         }
       } else {
-        effect.run();
+        getter = NOOP;
+        warnInvalidSource(source, onWarn);
+      }
+      if (cb && deep) {
+        const baseGetter = getter;
+        const depth = deep === true ? Infinity : deep;
+        getter = () => traverse(baseGetter(), depth);
+      }
+      super(getter);
+      this.cb = cb;
+      this.options = options;
+      this.boundCleanup = (fn) => onWatcherCleanup(fn, false, this);
+      this.forceTrigger = forceTrigger;
+      this.isMultiSource = isMultiSource;
+      if (once && cb) {
+        const _cb = cb;
+        cb = (...args) => {
+          _cb(...args);
+          this.stop();
+        };
       }
-    };
-    if (augmentJob) {
-      augmentJob(job);
-    }
-    effect = new ReactiveEffect(getter);
-    effect.scheduler = scheduler ? () => scheduler(job, false) : job;
-    boundCleanup = (fn) => onWatcherCleanup(fn, false, effect);
-    cleanup = effect.onStop = () => {
-      const cleanups = cleanupMap.get(effect);
-      if (cleanups) {
-        if (call) {
-          call(cleanups, 4);
-        } else {
-          for (const cleanup2 of cleanups) cleanup2();
-        }
-        cleanupMap.delete(effect);
+      this.cb = cb;
+      this.oldValue = isMultiSource ? new Array(source.length).fill(INITIAL_WATCHER_VALUE) : INITIAL_WATCHER_VALUE;
+      {
+        this.onTrack = options.onTrack;
+        this.onTrigger = options.onTrigger;
       }
-    };
-    {
-      effect.onTrack = options.onTrack;
-      effect.onTrigger = options.onTrigger;
     }
-    if (cb) {
-      if (immediate) {
-        job(true);
-      } else {
-        oldValue = effect.run();
+    run(initialRun = false) {
+      const oldValue = this.oldValue;
+      const newValue = this.oldValue = super.run();
+      if (!this.cb) {
+        return;
+      }
+      const { immediate, deep, call } = this.options;
+      if (initialRun && !immediate) {
+        return;
+      }
+      if (deep || this.forceTrigger || (this.isMultiSource ? newValue.some((v, i) => hasChanged(v, oldValue[i])) : hasChanged(newValue, oldValue))) {
+        cleanup(this);
+        const currentWatcher = activeWatcher;
+        activeWatcher = this;
+        try {
+          const args = [
+            newValue,
+            // pass undefined as the old value when it's changed for the first time
+            oldValue === INITIAL_WATCHER_VALUE ? void 0 : this.isMultiSource && oldValue[0] === INITIAL_WATCHER_VALUE ? [] : oldValue,
+            this.boundCleanup
+          ];
+          call ? call(this.cb, 3, args) : (
+            // @ts-expect-error
+            this.cb(...args)
+          );
+        } finally {
+          activeWatcher = currentWatcher;
+        }
       }
-    } else if (scheduler) {
-      scheduler(job.bind(null, true), true);
-    } else {
-      effect.run();
     }
-    watchHandle.pause = effect.pause.bind(effect);
-    watchHandle.resume = effect.resume.bind(effect);
-    watchHandle.stop = watchHandle;
-    return watchHandle;
+  }
+  function reactiveGetter(source, deep) {
+    if (deep) return source;
+    if (isShallow(source) || deep === false || deep === 0)
+      return traverse(source, 1);
+    return traverse(source);
+  }
+  function warnInvalidSource(s, onWarn) {
+    (onWarn || warn$2)(
+      `Invalid watch source: `,
+      s,
+      `A watch source can only be a getter/effect function, a ref, a reactive object, or an array of these types.`
+    );
   }
   function traverse(value, depth = Infinity, seen) {
     if (depth <= 0 || !isObject(value) || value["__v_skip"]) {
@@ -2163,8 +2304,8 @@ var VueRuntimeDOM = (function (exports) {
   }
 
   const stack = [];
-  function pushWarningContext(vnode) {
-    stack.push(vnode);
+  function pushWarningContext(ctx) {
+    stack.push(ctx);
   }
   function popWarningContext() {
     stack.pop();
@@ -2173,8 +2314,9 @@ var VueRuntimeDOM = (function (exports) {
   function warn$1(msg, ...args) {
     if (isWarning) return;
     isWarning = true;
-    pauseTracking();
-    const instance = stack.length ? stack[stack.length - 1].component : null;
+    const prevSub = setActiveSub();
+    const entry = stack.length ? stack[stack.length - 1] : null;
+    const instance = isVNode(entry) ? entry.component : entry;
     const appWarnHandler = instance && instance.appContext.config.warnHandler;
     const trace = getComponentTrace();
     if (appWarnHandler) {
@@ -2188,9 +2330,9 @@ var VueRuntimeDOM = (function (exports) {
             var _a, _b;
             return (_b = (_a = a.toString) == null ? void 0 : _a.call(a)) != null ? _b : JSON.stringify(a);
           }).join(""),
-          instance && instance.proxy,
+          instance && instance.proxy || instance,
           trace.map(
-            ({ vnode }) => `at <${formatComponentName(instance, vnode.type)}>`
+            ({ ctx }) => `at <${formatComponentName(instance, ctx.type)}>`
           ).join("\n"),
           trace
         ]
@@ -2204,27 +2346,31 @@ var VueRuntimeDOM = (function (exports) {
       }
       console.warn(...warnArgs);
     }
-    resetTracking();
+    setActiveSub(prevSub);
     isWarning = false;
   }
   function getComponentTrace() {
-    let currentVNode = stack[stack.length - 1];
-    if (!currentVNode) {
+    let currentCtx = stack[stack.length - 1];
+    if (!currentCtx) {
       return [];
     }
     const normalizedStack = [];
-    while (currentVNode) {
+    while (currentCtx) {
       const last = normalizedStack[0];
-      if (last && last.vnode === currentVNode) {
+      if (last && last.ctx === currentCtx) {
         last.recurseCount++;
       } else {
         normalizedStack.push({
-          vnode: currentVNode,
+          ctx: currentCtx,
           recurseCount: 0
         });
       }
-      const parentInstance = currentVNode.component && currentVNode.component.parent;
-      currentVNode = parentInstance && parentInstance.vnode;
+      if (isVNode(currentCtx)) {
+        const parent = currentCtx.component && currentCtx.component.parent;
+        currentCtx = parent && parent.vnode || parent;
+      } else {
+        currentCtx = currentCtx.parent;
+      }
     }
     return normalizedStack;
   }
@@ -2236,16 +2382,13 @@ var VueRuntimeDOM = (function (exports) {
     });
     return logs;
   }
-  function formatTraceEntry({ vnode, recurseCount }) {
+  function formatTraceEntry({ ctx, recurseCount }) {
     const postfix = recurseCount > 0 ? `... (${recurseCount} recursive calls)` : ``;
-    const isRoot = vnode.component ? vnode.component.parent == null : false;
-    const open = ` at <${formatComponentName(
-    vnode.component,
-    vnode.type,
-    isRoot
-  )}`;
+    const instance = isVNode(ctx) ? ctx.component : ctx;
+    const isRoot = instance ? instance.parent == null : false;
+    const open = ` at <${formatComponentName(instance, ctx.type, isRoot)}`;
     const close = `>` + postfix;
-    return vnode.props ? [open, ...formatProps(vnode.props), close] : [open + close];
+    return ctx.props ? [open, ...formatProps(ctx.props), close] : [open + close];
   }
   function formatProps(props) {
     const res = [];
@@ -2377,11 +2520,10 @@ var VueRuntimeDOM = (function (exports) {
     }
   }
   function handleError(err, instance, type, throwInDev = true) {
-    const contextVNode = instance ? instance.vnode : null;
     const { errorHandler, throwUnhandledErrorInProduction } = instance && instance.appContext.config || EMPTY_OBJ;
     if (instance) {
       let cur = instance.parent;
-      const exposedInstance = instance.proxy;
+      const exposedInstance = instance.proxy || instance;
       const errorInfo = ErrorTypeStrings$1[type] ;
       while (cur) {
         const errorCapturedHooks = cur.ec;
@@ -2395,26 +2537,26 @@ var VueRuntimeDOM = (function (exports) {
         cur = cur.parent;
       }
       if (errorHandler) {
-        pauseTracking();
+        const prevSub = setActiveSub();
         callWithErrorHandling(errorHandler, null, 10, [
           err,
           exposedInstance,
           errorInfo
         ]);
-        resetTracking();
+        setActiveSub(prevSub);
         return;
       }
     }
-    logError(err, type, contextVNode, throwInDev, throwUnhandledErrorInProduction);
+    logError(err, type, instance, throwInDev, throwUnhandledErrorInProduction);
   }
-  function logError(err, type, contextVNode, throwInDev = true, throwInProd = false) {
+  function logError(err, type, instance, throwInDev = true, throwInProd = false) {
     {
       const info = ErrorTypeStrings$1[type];
-      if (contextVNode) {
-        pushWarningContext(contextVNode);
+      if (instance) {
+        pushWarningContext(instance);
       }
       warn$1(`Unhandled error${info ? ` during execution of ${info}` : ``}`);
-      if (contextVNode) {
+      if (instance) {
         popWarningContext();
       }
       if (throwInDev) {
@@ -2425,26 +2567,23 @@ var VueRuntimeDOM = (function (exports) {
     }
   }
 
-  const queue = [];
-  let flushIndex = -1;
-  const pendingPostFlushCbs = [];
-  let activePostFlushCbs = null;
+  const jobs = [];
+  let postJobs = [];
+  let activePostJobs = null;
+  let currentFlushPromise = null;
+  let jobsLength = 0;
+  let flushIndex = 0;
   let postFlushIndex = 0;
   const resolvedPromise = /* @__PURE__ */ Promise.resolve();
-  let currentFlushPromise = null;
   const RECURSION_LIMIT = 100;
   function nextTick(fn) {
     const p = currentFlushPromise || resolvedPromise;
     return fn ? p.then(this ? fn.bind(this) : fn) : p;
   }
-  function findInsertionIndex(id) {
-    let start = flushIndex + 1;
-    let end = queue.length;
+  function findInsertionIndex(order, queue, start, end) {
     while (start < end) {
       const middle = start + end >>> 1;
-      const middleJob = queue[middle];
-      const middleJobId = getId(middleJob);
-      if (middleJobId < id || middleJobId === id && middleJob.flags & 2) {
+      if (queue[middle].order <= order) {
         start = middle + 1;
       } else {
         end = middle;
@@ -2452,130 +2591,168 @@ var VueRuntimeDOM = (function (exports) {
     }
     return start;
   }
-  function queueJob(job) {
-    if (!(job.flags & 1)) {
-      const jobId = getId(job);
-      const lastJob = queue[queue.length - 1];
-      if (!lastJob || // fast path when the job id is larger than the tail
-      !(job.flags & 2) && jobId >= getId(lastJob)) {
-        queue.push(job);
+  function queueJob(job, id, isPre = false) {
+    if (queueJobWorker(
+      job,
+      id === void 0 ? isPre ? -2 : Infinity : isPre ? id * 2 : id * 2 + 1,
+      jobs,
+      jobsLength,
+      flushIndex
+    )) {
+      jobsLength++;
+      queueFlush();
+    }
+  }
+  function queueJobWorker(job, order, queue, length, flushIndex2) {
+    const flags = job.flags;
+    if (!(flags & 1)) {
+      job.flags = flags | 1;
+      job.order = order;
+      if (flushIndex2 === length || // fast path when the job id is larger than the tail
+      order >= queue[length - 1].order) {
+        queue[length] = job;
       } else {
-        queue.splice(findInsertionIndex(jobId), 0, job);
+        queue.splice(findInsertionIndex(order, queue, flushIndex2, length), 0, job);
       }
-      job.flags |= 1;
-      queueFlush();
+      return true;
     }
+    return false;
   }
+  const doFlushJobs = () => {
+    try {
+      flushJobs();
+    } catch (e) {
+      currentFlushPromise = null;
+      throw e;
+    }
+  };
   function queueFlush() {
     if (!currentFlushPromise) {
-      currentFlushPromise = resolvedPromise.then(flushJobs);
+      currentFlushPromise = resolvedPromise.then(doFlushJobs);
     }
   }
-  function queuePostFlushCb(cb) {
-    if (!isArray(cb)) {
-      if (activePostFlushCbs && cb.id === -1) {
-        activePostFlushCbs.splice(postFlushIndex + 1, 0, cb);
-      } else if (!(cb.flags & 1)) {
-        pendingPostFlushCbs.push(cb);
-        cb.flags |= 1;
+  function queuePostFlushCb(jobs2, id = Infinity) {
+    if (!isArray(jobs2)) {
+      if (activePostJobs && id === -1) {
+        activePostJobs.splice(postFlushIndex, 0, jobs2);
+      } else {
+        queueJobWorker(jobs2, id, postJobs, postJobs.length, 0);
       }
     } else {
-      pendingPostFlushCbs.push(...cb);
+      for (const job of jobs2) {
+        queueJobWorker(job, id, postJobs, postJobs.length, 0);
+      }
     }
     queueFlush();
   }
-  function flushPreFlushCbs(instance, seen, i = flushIndex + 1) {
+  function flushPreFlushCbs(instance, seen) {
     {
       seen = seen || /* @__PURE__ */ new Map();
     }
-    for (; i < queue.length; i++) {
-      const cb = queue[i];
-      if (cb && cb.flags & 2) {
-        if (instance && cb.id !== instance.uid) {
-          continue;
-        }
-        if (checkRecursiveUpdates(seen, cb)) {
-          continue;
-        }
-        queue.splice(i, 1);
-        i--;
-        if (cb.flags & 4) {
-          cb.flags &= -2;
-        }
-        cb();
-        if (!(cb.flags & 4)) {
-          cb.flags &= -2;
-        }
+    for (let i = flushIndex; i < jobsLength; i++) {
+      const cb = jobs[i];
+      if (cb.order & 1 || cb.order === Infinity) {
+        continue;
+      }
+      if (instance && cb.order !== instance.uid * 2) {
+        continue;
+      }
+      if (checkRecursiveUpdates(seen, cb)) {
+        continue;
+      }
+      jobs.splice(i, 1);
+      i--;
+      jobsLength--;
+      if (cb.flags & 2) {
+        cb.flags &= -2;
+      }
+      cb();
+      if (!(cb.flags & 2)) {
+        cb.flags &= -2;
       }
     }
   }
   function flushPostFlushCbs(seen) {
-    if (pendingPostFlushCbs.length) {
-      const deduped = [...new Set(pendingPostFlushCbs)].sort(
-        (a, b) => getId(a) - getId(b)
-      );
-      pendingPostFlushCbs.length = 0;
-      if (activePostFlushCbs) {
-        activePostFlushCbs.push(...deduped);
+    if (postJobs.length) {
+      if (activePostJobs) {
+        activePostJobs.push(...postJobs);
+        postJobs.length = 0;
         return;
       }
-      activePostFlushCbs = deduped;
+      activePostJobs = postJobs;
+      postJobs = [];
       {
         seen = seen || /* @__PURE__ */ new Map();
       }
-      for (postFlushIndex = 0; postFlushIndex < activePostFlushCbs.length; postFlushIndex++) {
-        const cb = activePostFlushCbs[postFlushIndex];
+      while (postFlushIndex < activePostJobs.length) {
+        const cb = activePostJobs[postFlushIndex++];
         if (checkRecursiveUpdates(seen, cb)) {
           continue;
         }
-        if (cb.flags & 4) {
+        if (cb.flags & 2) {
           cb.flags &= -2;
         }
-        if (!(cb.flags & 8)) cb();
-        cb.flags &= -2;
+        if (!(cb.flags & 4)) {
+          try {
+            cb();
+          } finally {
+            cb.flags &= -2;
+          }
+        }
       }
-      activePostFlushCbs = null;
+      activePostJobs = null;
       postFlushIndex = 0;
     }
   }
-  const getId = (job) => job.id == null ? job.flags & 2 ? -1 : Infinity : job.id;
+  let isFlushing = false;
+  function flushOnAppMount() {
+    if (!isFlushing) {
+      isFlushing = true;
+      flushPreFlushCbs();
+      flushPostFlushCbs();
+      isFlushing = false;
+    }
+  }
   function flushJobs(seen) {
     {
-      seen = seen || /* @__PURE__ */ new Map();
+      seen || (seen = /* @__PURE__ */ new Map());
     }
-    const check = (job) => checkRecursiveUpdates(seen, job) ;
     try {
-      for (flushIndex = 0; flushIndex < queue.length; flushIndex++) {
-        const job = queue[flushIndex];
-        if (job && !(job.flags & 8)) {
-          if (check(job)) {
+      while (flushIndex < jobsLength) {
+        const job = jobs[flushIndex];
+        jobs[flushIndex++] = void 0;
+        if (!(job.flags & 4)) {
+          if (checkRecursiveUpdates(seen, job)) {
             continue;
           }
-          if (job.flags & 4) {
+          if (job.flags & 2) {
             job.flags &= ~1;
           }
-          callWithErrorHandling(
-            job,
-            job.i,
-            job.i ? 15 : 14
-          );
-          if (!(job.flags & 4)) {
-            job.flags &= ~1;
+          try {
+            job();
+          } catch (err) {
+            handleError(
+              err,
+              job.i,
+              job.i ? 15 : 14
+            );
+          } finally {
+            if (!(job.flags & 2)) {
+              job.flags &= ~1;
+            }
           }
         }
       }
     } finally {
-      for (; flushIndex < queue.length; flushIndex++) {
-        const job = queue[flushIndex];
-        if (job) {
-          job.flags &= -2;
-        }
+      while (flushIndex < jobsLength) {
+        jobs[flushIndex].flags &= -2;
+        jobs[flushIndex++] = void 0;
       }
-      flushIndex = -1;
-      queue.length = 0;
+      flushIndex = 0;
+      jobsLength = 0;
       flushPostFlushCbs(seen);
       currentFlushPromise = null;
-      if (queue.length || pendingPostFlushCbs.length) {
+      if (jobsLength || postJobs.length) {
         flushJobs(seen);
       }
     }
@@ -2642,10 +2819,17 @@ var VueRuntimeDOM = (function (exports) {
         instance.render = newRender;
         normalizeClassComponent(instance.type).render = newRender;
       }
-      instance.renderCache = [];
       isHmrUpdating = true;
-      instance.update();
-      isHmrUpdating = false;
+      if (instance.vapor) {
+        instance.hmrRerender();
+      } else {
+        const i = instance;
+        i.renderCache = [];
+        i.effect.run();
+      }
+      nextTick(() => {
+        isHmrUpdating = false;
+      });
     });
   }
   function reload(id, newComp) {
@@ -2654,42 +2838,54 @@ var VueRuntimeDOM = (function (exports) {
     newComp = normalizeClassComponent(newComp);
     updateComponentDef(record.initialDef, newComp);
     const instances = [...record.instances];
-    for (let i = 0; i < instances.length; i++) {
-      const instance = instances[i];
-      const oldComp = normalizeClassComponent(instance.type);
-      let dirtyInstances = hmrDirtyComponents.get(oldComp);
-      if (!dirtyInstances) {
-        if (oldComp !== record.initialDef) {
-          updateComponentDef(oldComp, newComp);
-        }
-        hmrDirtyComponents.set(oldComp, dirtyInstances = /* @__PURE__ */ new Set());
-      }
-      dirtyInstances.add(instance);
-      instance.appContext.propsCache.delete(instance.type);
-      instance.appContext.emitsCache.delete(instance.type);
-      instance.appContext.optionsCache.delete(instance.type);
-      if (instance.ceReload) {
+    if (newComp.vapor) {
+      for (const instance of instances) {
+        instance.hmrReload(newComp);
+      }
+    } else {
+      for (const instance of instances) {
+        const oldComp = normalizeClassComponent(instance.type);
+        let dirtyInstances = hmrDirtyComponents.get(oldComp);
+        if (!dirtyInstances) {
+          if (oldComp !== record.initialDef) {
+            updateComponentDef(oldComp, newComp);
+          }
+          hmrDirtyComponents.set(oldComp, dirtyInstances = /* @__PURE__ */ new Set());
+        }
         dirtyInstances.add(instance);
-        instance.ceReload(newComp.styles);
-        dirtyInstances.delete(instance);
-      } else if (instance.parent) {
-        queueJob(() => {
-          isHmrUpdating = true;
-          instance.parent.update();
-          isHmrUpdating = false;
+        instance.appContext.propsCache.delete(instance.type);
+        instance.appContext.emitsCache.delete(instance.type);
+        instance.appContext.optionsCache.delete(instance.type);
+        if (instance.ceReload) {
+          dirtyInstances.add(instance);
+          instance.ceReload(newComp.styles);
           dirtyInstances.delete(instance);
-        });
-      } else if (instance.appContext.reload) {
-        instance.appContext.reload();
-      } else if (typeof window !== "undefined") {
-        window.location.reload();
-      } else {
-        console.warn(
-          "[HMR] Root or manually mounted instance modified. Full reload required."
-        );
-      }
-      if (instance.root.ce && instance !== instance.root) {
-        instance.root.ce._removeChildStyle(oldComp);
+        } else if (instance.parent) {
+          queueJob(() => {
+            isHmrUpdating = true;
+            const parent = instance.parent;
+            if (parent.vapor) {
+              parent.hmrRerender();
+            } else {
+              parent.effect.run();
+            }
+            nextTick(() => {
+              isHmrUpdating = false;
+            });
+            dirtyInstances.delete(instance);
+          });
+        } else if (instance.appContext.reload) {
+          instance.appContext.reload();
+        } else if (typeof window !== "undefined") {
+          window.location.reload();
+        } else {
+          console.warn(
+            "[HMR] Root or manually mounted instance modified. Full reload required."
+          );
+        }
+        if (instance.root.ce && instance !== instance.root) {
+          instance.root.ce._removeChildStyle(oldComp);
+        }
       }
     }
     queuePostFlushCb(() => {
@@ -2902,14 +3098,14 @@ var VueRuntimeDOM = (function (exports) {
       }
       let hook = binding.dir[name];
       if (hook) {
-        pauseTracking();
+        const prevSub = setActiveSub();
         callWithAsyncErrorHandling(hook, instance, 8, [
           vnode.el,
           binding,
           vnode,
           prevVNode
         ]);
-        resetTracking();
+        setActiveSub(prevSub);
       }
     }
   }
@@ -3009,29 +3205,37 @@ var VueRuntimeDOM = (function (exports) {
         }
         if (isTeleportDeferred(n2.props)) {
           n2.el.__isMounted = false;
-          queuePostRenderEffect(() => {
-            mountToTarget();
-            delete n2.el.__isMounted;
-          }, parentSuspense);
+          queuePostRenderEffect(
+            () => {
+              mountToTarget();
+              delete n2.el.__isMounted;
+            },
+            void 0,
+            parentSuspense
+          );
         } else {
           mountToTarget();
         }
       } else {
         if (isTeleportDeferred(n2.props) && n1.el.__isMounted === false) {
-          queuePostRenderEffect(() => {
-            TeleportImpl.process(
-              n1,
-              n2,
-              container,
-              anchor,
-              parentComponent,
-              parentSuspense,
-              namespace,
-              slotScopeIds,
-              optimized,
-              internals
-            );
-          }, parentSuspense);
+          queuePostRenderEffect(
+            () => {
+              TeleportImpl.process(
+                n1,
+                n2,
+                container,
+                anchor,
+                parentComponent,
+                parentSuspense,
+                namespace,
+                slotScopeIds,
+                optimized,
+                internals
+              );
+            },
+            void 0,
+            parentSuspense
+          );
           return;
         }
         n2.el = n1.el;
@@ -3078,6 +3282,7 @@ var VueRuntimeDOM = (function (exports) {
               container,
               mainAnchor,
               internals,
+              parentComponent,
               1
             );
           } else {
@@ -3097,6 +3302,7 @@ var VueRuntimeDOM = (function (exports) {
                 nextTarget,
                 null,
                 internals,
+                parentComponent,
                 0
               );
             } else {
@@ -3112,6 +3318,7 @@ var VueRuntimeDOM = (function (exports) {
               target,
               targetAnchor,
               internals,
+              parentComponent,
               1
             );
           }
@@ -3151,7 +3358,7 @@ var VueRuntimeDOM = (function (exports) {
     move: moveTeleport,
     hydrate: hydrateTeleport
   };
-  function moveTeleport(vnode, container, parentAnchor, { o: { insert }, m: move }, moveType = 2) {
+  function moveTeleport(vnode, container, parentAnchor, { o: { insert }, m: move }, parentComponent, moveType = 2) {
     if (moveType === 0) {
       insert(vnode.targetAnchor, container, parentAnchor);
     }
@@ -3167,7 +3374,8 @@ var VueRuntimeDOM = (function (exports) {
             children[i],
             container,
             parentAnchor,
-            2
+            2,
+            parentComponent
           );
         }
       }
@@ -3352,7 +3560,7 @@ var VueRuntimeDOM = (function (exports) {
             state.isLeaving = true;
             leavingHooks.afterLeave = () => {
               state.isLeaving = false;
-              if (!(instance.job.flags & 8)) {
+              if (!(instance.job.flags & 4)) {
                 instance.update();
               }
               delete leavingHooks.afterLeave;
@@ -3631,7 +3839,7 @@ var VueRuntimeDOM = (function (exports) {
   }
 
   function useId() {
-    const i = getCurrentInstance();
+    const i = getCurrentGenericInstance();
     if (i) {
       return (i.appContext.config.idPrefix || "v") + "-" + i.ids[0] + i.ids[1]++;
     } else {
@@ -3647,7 +3855,7 @@ var VueRuntimeDOM = (function (exports) {
 
   const knownTemplateRefs = /* @__PURE__ */ new WeakSet();
   function useTemplateRef(key) {
-    const i = getCurrentInstance();
+    const i = getCurrentGenericInstance();
     const r = shallowRef(null);
     if (i) {
       const refs = i.refs === EMPTY_OBJ ? i.refs = {} : i.refs;
@@ -3767,8 +3975,7 @@ var VueRuntimeDOM = (function (exports) {
           }
         };
         if (value) {
-          doSet.id = -1;
-          queuePostRenderEffect(doSet, parentSuspense);
+          queuePostRenderEffect(doSet, -1, parentSuspense);
         } else {
           doSet();
         }
@@ -3936,6 +4143,9 @@ var VueRuntimeDOM = (function (exports) {
               );
             }
           } else if (shapeFlag & 6) {
+            if (vnode.type.__vapor) {
+              throw new Error("Vapor component hydration is not supported yet.");
+            }
             vnode.slotScopeIds = slotScopeIds;
             const container = parentNode(node);
             if (isFragmentStart) {
@@ -4097,11 +4307,15 @@ Server rendered element contains more child nodes than client vdom.`
           invokeDirectiveHook(vnode, null, parentComponent, "beforeMount");
         }
         if ((vnodeHooks = props && props.onVnodeMounted) || dirs || needCallTransitionHooks) {
-          queueEffectWithSuspense(() => {
-            vnodeHooks && invokeVNodeHook(vnodeHooks, parentComponent, vnode);
-            needCallTransitionHooks && transition.enter(el);
-            dirs && invokeDirectiveHook(vnode, null, parentComponent, "mounted");
-          }, parentSuspense);
+          queueEffectWithSuspense(
+            () => {
+              vnodeHooks && invokeVNodeHook(vnodeHooks, parentComponent, vnode);
+              needCallTransitionHooks && transition.enter(el);
+              dirs && invokeDirectiveHook(vnode, null, parentComponent, "mounted");
+            },
+            void 0,
+            parentSuspense
+          );
         }
       }
       return el.nextSibling;
@@ -4381,14 +4595,16 @@ Server rendered element contains fewer child nodes than client vdom.`
     if (instance.getCssVars && (vnode === root || root && root.type === Fragment && root.children.includes(vnode))) {
       const cssVars = instance.getCssVars();
       for (const key in cssVars) {
-        expectedMap.set(
-          `--${getEscapedCssVarName(key)}`,
-          String(cssVars[key])
-        );
+        const value = normalizeCssVarValue(cssVars[key]);
+        expectedMap.set(`--${getEscapedCssVarName(key)}`, value);
       }
     }
     if (vnode === root && instance.parent) {
-      resolveCssVars(instance.parent, instance.vnode, expectedMap);
+      resolveCssVars(
+        instance.parent,
+        instance.vnode,
+        expectedMap
+      );
     }
   }
   const allowMismatchAttr = "data-allow-mismatch";
@@ -4647,7 +4863,7 @@ Server rendered element contains fewer child nodes than client vdom.`
         }
         load().then(() => {
           loaded.value = true;
-          if (instance.parent && isKeepAlive(instance.parent.vnode)) {
+          if (instance.parent && instance.parent.vnode && isKeepAlive(instance.parent.vnode)) {
             instance.parent.update();
           }
         }).catch((err) => {
@@ -4690,15 +4906,15 @@ Server rendered element contains fewer child nodes than client vdom.`
       max: [String, Number]
     },
     setup(props, { slots }) {
-      const instance = getCurrentInstance();
-      const sharedContext = instance.ctx;
+      const keepAliveInstance = getCurrentInstance();
+      const sharedContext = keepAliveInstance.ctx;
       const cache = /* @__PURE__ */ new Map();
       const keys = /* @__PURE__ */ new Set();
       let current = null;
       {
-        instance.__v_cache = cache;
+        keepAliveInstance.__v_cache = cache;
       }
-      const parentSuspense = instance.suspense;
+      const parentSuspense = keepAliveInstance.suspense;
       const {
         renderer: {
           p: patch,
@@ -4709,58 +4925,80 @@ Server rendered element contains fewer child nodes than client vdom.`
       } = sharedContext;
       const storageContainer = createElement("div");
       sharedContext.activate = (vnode, container, anchor, namespace, optimized) => {
-        const instance2 = vnode.component;
-        move(vnode, container, anchor, 0, parentSuspense);
+        const instance = vnode.component;
+        move(
+          vnode,
+          container,
+          anchor,
+          0,
+          keepAliveInstance,
+          parentSuspense
+        );
         patch(
-          instance2.vnode,
+          instance.vnode,
           vnode,
           container,
           anchor,
-          instance2,
+          instance,
           parentSuspense,
           namespace,
           vnode.slotScopeIds,
           optimized
         );
-        queuePostRenderEffect(() => {
-          instance2.isDeactivated = false;
-          if (instance2.a) {
-            invokeArrayFns(instance2.a);
-          }
-          const vnodeHook = vnode.props && vnode.props.onVnodeMounted;
-          if (vnodeHook) {
-            invokeVNodeHook(vnodeHook, instance2.parent, vnode);
-          }
-        }, parentSuspense);
+        queuePostRenderEffect(
+          () => {
+            instance.isDeactivated = false;
+            if (instance.a) {
+              invokeArrayFns(instance.a);
+            }
+            const vnodeHook = vnode.props && vnode.props.onVnodeMounted;
+            if (vnodeHook) {
+              invokeVNodeHook(vnodeHook, instance.parent, vnode);
+            }
+          },
+          void 0,
+          parentSuspense
+        );
         {
-          devtoolsComponentAdded(instance2);
+          devtoolsComponentAdded(instance);
         }
       };
       sharedContext.deactivate = (vnode) => {
-        const instance2 = vnode.component;
-        invalidateMount(instance2.m);
-        invalidateMount(instance2.a);
-        move(vnode, storageContainer, null, 1, parentSuspense);
-        queuePostRenderEffect(() => {
-          if (instance2.da) {
-            invokeArrayFns(instance2.da);
-          }
-          const vnodeHook = vnode.props && vnode.props.onVnodeUnmounted;
-          if (vnodeHook) {
-            invokeVNodeHook(vnodeHook, instance2.parent, vnode);
-          }
-          instance2.isDeactivated = true;
-        }, parentSuspense);
+        const instance = vnode.component;
+        invalidateMount(instance.m);
+        invalidateMount(instance.a);
+        move(
+          vnode,
+          storageContainer,
+          null,
+          1,
+          keepAliveInstance,
+          parentSuspense
+        );
+        queuePostRenderEffect(
+          () => {
+            if (instance.da) {
+              invokeArrayFns(instance.da);
+            }
+            const vnodeHook = vnode.props && vnode.props.onVnodeUnmounted;
+            if (vnodeHook) {
+              invokeVNodeHook(vnodeHook, instance.parent, vnode);
+            }
+            instance.isDeactivated = true;
+          },
+          void 0,
+          parentSuspense
+        );
         {
-          devtoolsComponentAdded(instance2);
+          devtoolsComponentAdded(instance);
         }
         {
-          instance2.__keepAliveStorageContainer = storageContainer;
+          instance.__keepAliveStorageContainer = storageContainer;
         }
       };
       function unmount(vnode) {
         resetShapeFlag(vnode);
-        _unmount(vnode, instance, parentSuspense, true);
+        _unmount(vnode, keepAliveInstance, parentSuspense, true);
       }
       function pruneCache(filter) {
         cache.forEach((vnode, key) => {
@@ -4792,12 +5030,19 @@ Server rendered element contains fewer child nodes than client vdom.`
       let pendingCacheKey = null;
       const cacheSubtree = () => {
         if (pendingCacheKey != null) {
-          if (isSuspense(instance.subTree.type)) {
-            queuePostRenderEffect(() => {
-              cache.set(pendingCacheKey, getInnerChild(instance.subTree));
-            }, instance.subTree.suspense);
+          if (isSuspense(keepAliveInstance.subTree.type)) {
+            queuePostRenderEffect(
+              () => {
+                cache.set(
+                  pendingCacheKey,
+                  getInnerChild(keepAliveInstance.subTree)
+                );
+              },
+              void 0,
+              keepAliveInstance.subTree.suspense
+            );
           } else {
-            cache.set(pendingCacheKey, getInnerChild(instance.subTree));
+            cache.set(pendingCacheKey, getInnerChild(keepAliveInstance.subTree));
           }
         }
       };
@@ -4805,12 +5050,12 @@ Server rendered element contains fewer child nodes than client vdom.`
       onUpdated(cacheSubtree);
       onBeforeUnmount(() => {
         cache.forEach((cached) => {
-          const { subTree, suspense } = instance;
+          const { subTree, suspense } = keepAliveInstance;
           const vnode = getInnerChild(subTree);
           if (cached.type === vnode.type && cached.key === vnode.key) {
             resetShapeFlag(vnode);
             const da = vnode.component.da;
-            da && queuePostRenderEffect(da, suspense);
+            da && queuePostRenderEffect(da, void 0, suspense);
             return;
           }
           unmount(cached);
@@ -4896,7 +5141,7 @@ Server rendered element contains fewer child nodes than client vdom.`
   function onDeactivated(hook, target) {
     registerKeepAliveHook(hook, "da", target);
   }
-  function registerKeepAliveHook(hook, type, target = currentInstance) {
+  function registerKeepAliveHook(hook, type, target = getCurrentInstance()) {
     const wrappedHook = hook.__wdc || (hook.__wdc = () => {
       let current = target;
       while (current) {
@@ -4910,7 +5155,7 @@ Server rendered element contains fewer child nodes than client vdom.`
     injectHook(type, wrappedHook, target);
     if (target) {
       let current = target.parent;
-      while (current && current.parent) {
+      while (current && current.parent && current.parent.vnode) {
         if (isKeepAlive(current.parent.vnode)) {
           injectToKeepAliveRoot(wrappedHook, type, target, current);
         }
@@ -4942,12 +5187,14 @@ Server rendered element contains fewer child nodes than client vdom.`
     if (target) {
       const hooks = target[type] || (target[type] = []);
       const wrappedHook = hook.__weh || (hook.__weh = (...args) => {
-        pauseTracking();
-        const reset = setCurrentInstance(target);
-        const res = callWithAsyncErrorHandling(hook, target, type, args);
-        reset();
-        resetTracking();
-        return res;
+        const prevSub = setActiveSub();
+        const prev = setCurrentInstance(target);
+        try {
+          return callWithAsyncErrorHandling(hook, target, type, args);
+        } finally {
+          setCurrentInstance(...prev);
+          setActiveSub(prevSub);
+        }
       });
       if (prepend) {
         hooks.unshift(wrappedHook);
@@ -5018,7 +5265,11 @@ Server rendered element contains fewer child nodes than client vdom.`
       const res = (
         // local registration
         // check instance[type] first which is resolved for options API
-        resolve(instance[type] || Component[type], name) || // global registration
+        resolve(
+          instance[type] || Component[type],
+          name
+        ) || // global registration
+        // @ts-expect-error filters only exist in compat mode
         resolve(instance.appContext[type], name)
       );
       if (!res && maybeSelfReference) {
@@ -5112,7 +5363,13 @@ If this is a native custom element, make sure to exclude it from component resol
   }
 
   function renderSlot(slots, name, props = {}, fallback, noSlotted) {
-    if (currentRenderingInstance.ce || currentRenderingInstance.parent && isAsyncWrapper(currentRenderingInstance.parent) && currentRenderingInstance.parent.ce) {
+    let slot = slots[name];
+    if (slot && slot.__vapor) {
+      const ret = (openBlock(), createBlock(VaporSlot, props));
+      ret.vs = { slot, fallback };
+      return ret;
+    }
+    if (currentRenderingInstance && (currentRenderingInstance.ce || currentRenderingInstance.parent && isAsyncWrapper(currentRenderingInstance.parent) && currentRenderingInstance.parent.ce)) {
       if (name !== "default") props.name = name;
       return openBlock(), createBlock(
         Fragment,
@@ -5121,7 +5378,6 @@ If this is a native custom element, make sure to exclude it from component resol
         64
       );
     }
-    let slot = slots[name];
     if (slot && slot.length > 1) {
       warn$1(
         `SSR-optimized slot function detected in a non-SSR-optimized render function. You need to mark this component with $dynamic-slots in the parent template.`
@@ -5176,8 +5432,9 @@ If this is a native custom element, make sure to exclude it from component resol
   }
 
   const getPublicInstance = (i) => {
-    if (!i) return null;
-    if (isStatefulComponent(i)) return getComponentPublicInstance(i);
+    if (!i || i.vapor) return null;
+    if (isStatefulComponent(i))
+      return getComponentPublicInstance(i);
     return getPublicInstance(i.parent);
   };
   const publicPropertiesMap = (
@@ -5470,11 +5727,16 @@ If this is a native custom element, make sure to exclude it from component resol
     return getContext().attrs;
   }
   function getContext() {
-    const i = getCurrentInstance();
+    const i = getCurrentGenericInstance();
     if (!i) {
       warn$1(`useContext() called without active instance.`);
     }
-    return i.setupContext || (i.setupContext = createSetupContext(i));
+    if (i.vapor) {
+      return i;
+    } else {
+      const ii = i;
+      return ii.setupContext || (ii.setupContext = createSetupContext(ii));
+    }
   }
   function normalizePropsOrEmits(props) {
     return isArray(props) ? props.reduce(
@@ -5522,14 +5784,14 @@ If this is a native custom element, make sure to exclude it from component resol
     return ret;
   }
   function withAsyncContext(getAwaitable) {
-    const ctx = getCurrentInstance();
+    const ctx = getCurrentGenericInstance();
     if (!ctx) {
       warn$1(
         `withAsyncContext called without active current instance. This is likely a bug.`
       );
     }
     let awaitable = getAwaitable();
-    unsetCurrentInstance();
+    setCurrentInstance(null, void 0);
     if (isPromise(awaitable)) {
       awaitable = awaitable.catch((e) => {
         setCurrentInstance(ctx);
@@ -5973,7 +6235,7 @@ If this is a native custom element, make sure to exclude it from component resol
     };
   }
   let uid$1 = 0;
-  function createAppAPI(render, hydrate) {
+  function createAppAPI(mount, unmount, getPublicInstance, render) {
     return function createApp(rootComponent, rootProps = null) {
       if (!isFunction(rootComponent)) {
         rootComponent = extend({}, rootComponent);
@@ -6066,33 +6328,15 @@ If this is a native custom element, make sure to exclude it from component resol
  If you want to mount another app on the same host container, you need to unmount the previous app by calling \`app.unmount()\` first.`
               );
             }
-            const vnode = app._ceVNode || createVNode(rootComponent, rootProps);
-            vnode.appContext = context;
-            if (namespace === true) {
-              namespace = "svg";
-            } else if (namespace === false) {
-              namespace = void 0;
-            }
+            const instance = mount(app, rootContainer, isHydrate, namespace);
             {
-              context.reload = () => {
-                const cloned = cloneVNode(vnode);
-                cloned.el = null;
-                render(cloned, rootContainer, namespace);
-              };
-            }
-            if (isHydrate && hydrate) {
-              hydrate(vnode, rootContainer);
-            } else {
-              render(vnode, rootContainer, namespace);
+              app._instance = instance;
+              devtoolsInitApp(app, version);
             }
             isMounted = true;
             app._container = rootContainer;
             rootContainer.__vue_app__ = app;
-            {
-              app._instance = vnode.component;
-              devtoolsInitApp(app, version);
-            }
-            return getComponentPublicInstance(vnode.component);
+            return getPublicInstance(instance);
           } else {
             warn$1(
               `App has already been mounted.
@@ -6115,7 +6359,7 @@ If you want to remount the same app, move your app creation logic into a factory
               app._instance,
               16
             );
-            render(null, app._container);
+            unmount(app);
             {
               app._instance = null;
               devtoolsUnmountApp(app);
@@ -6156,6 +6400,7 @@ If you want to remount the same app, move your app creation logic into a factory
   let currentApp = null;
 
   function provide(key, value) {
+    const currentInstance = getCurrentGenericInstance();
     if (!currentInstance) {
       {
         warn$1(`provide() can only be used inside setup().`);
@@ -6170,9 +6415,9 @@ If you want to remount the same app, move your app creation logic into a factory
     }
   }
   function inject(key, defaultValue, treatDefaultAsFactory = false) {
-    const instance = currentInstance || currentRenderingInstance;
+    const instance = getCurrentGenericInstance();
     if (instance || currentApp) {
-      let provides = currentApp ? currentApp._context.provides : instance ? instance.parent == null || instance.ce ? instance.vnode.appContext && instance.vnode.appContext.provides : instance.parent.provides : void 0;
+      let provides = currentApp ? currentApp._context.provides : instance ? instance.parent == null || instance.ce ? instance.appContext && instance.appContext.provides : instance.parent.provides : void 0;
       if (provides && key in provides) {
         return provides[key];
       } else if (arguments.length > 1) {
@@ -6185,7 +6430,7 @@ If you want to remount the same app, move your app creation logic into a factory
     }
   }
   function hasInjectionContext() {
-    return !!(currentInstance || currentRenderingInstance || currentApp);
+    return !!(getCurrentGenericInstance() || currentApp);
   }
 
   const internalObjectProto = {};
@@ -6193,7 +6438,7 @@ If you want to remount the same app, move your app creation logic into a factory
   const isInternalObject = (obj) => Object.getPrototypeOf(obj) === internalObjectProto;
 
   function initProps(instance, rawProps, isStateful, isSSR = false) {
-    const props = {};
+    const props = instance.props = {};
     const attrs = createInternalObject();
     instance.propsDefaults = /* @__PURE__ */ Object.create(null);
     setFullProps(instance, rawProps, props, attrs);
@@ -6203,7 +6448,7 @@ If you want to remount the same app, move your app creation logic into a factory
       }
     }
     {
-      validateProps(rawProps || {}, props, instance);
+      validateProps(rawProps || {}, props, instance.propsOptions[0]);
     }
     if (isStateful) {
       instance.props = isSSR ? props : shallowReactive(props);
@@ -6255,11 +6500,10 @@ If you want to remount the same app, move your app creation logic into a factory
               const camelizedKey = camelize(key);
               props[camelizedKey] = resolvePropValue(
                 options,
-                rawCurrentProps,
                 camelizedKey,
                 value,
                 instance,
-                false
+                baseResolveDefault
               );
             }
           } else {
@@ -6286,10 +6530,10 @@ If you want to remount the same app, move your app creation logic into a factory
             rawPrevProps[kebabKey] !== void 0)) {
               props[key] = resolvePropValue(
                 options,
-                rawCurrentProps,
                 key,
                 void 0,
                 instance,
+                baseResolveDefault,
                 true
               );
             }
@@ -6311,7 +6555,7 @@ If you want to remount the same app, move your app creation logic into a factory
       trigger(instance.attrs, "set", "");
     }
     {
-      validateProps(rawProps || {}, props, instance);
+      validateProps(rawProps || {}, props, instance.propsOptions[0]);
     }
   }
   function setFullProps(instance, rawProps, props, attrs) {
@@ -6340,39 +6584,37 @@ If you want to remount the same app, move your app creation logic into a factory
       }
     }
     if (needCastKeys) {
-      const rawCurrentProps = toRaw(props);
       const castValues = rawCastValues || EMPTY_OBJ;
       for (let i = 0; i < needCastKeys.length; i++) {
         const key = needCastKeys[i];
         props[key] = resolvePropValue(
           options,
-          rawCurrentProps,
           key,
           castValues[key],
           instance,
+          baseResolveDefault,
           !hasOwn(castValues, key)
         );
       }
     }
     return hasAttrsChanged;
   }
-  function resolvePropValue(options, props, key, value, instance, isAbsent) {
+  function resolvePropValue(options, key, value, instance, resolveDefault, isAbsent = false) {
     const opt = options[key];
     if (opt != null) {
       const hasDefault = hasOwn(opt, "default");
       if (hasDefault && value === void 0) {
         const defaultValue = opt.default;
         if (opt.type !== Function && !opt.skipFactory && isFunction(defaultValue)) {
-          const { propsDefaults } = instance;
-          if (key in propsDefaults) {
-            value = propsDefaults[key];
+          const cachedDefaults = instance.propsDefaults || (instance.propsDefaults = {});
+          if (hasOwn(cachedDefaults, key)) {
+            value = cachedDefaults[key];
           } else {
-            const reset = setCurrentInstance(instance);
-            value = propsDefaults[key] = defaultValue.call(
-              null,
-              props
+            value = cachedDefaults[key] = resolveDefault(
+              defaultValue,
+              instance,
+              key
             );
-            reset();
           }
         } else {
           value = defaultValue;
@@ -6391,6 +6633,17 @@ If you want to remount the same app, move your app creation logic into a factory
     }
     return value;
   }
+  function baseResolveDefault(factory, instance, key) {
+    let value;
+    const prev = setCurrentInstance(instance);
+    const props = toRaw(instance.props);
+    value = factory.call(
+      null,
+      props
+    );
+    setCurrentInstance(...prev);
+    return value;
+  }
   const mixinPropsCache = /* @__PURE__ */ new WeakMap();
   function normalizePropsOptions(comp, appContext, asMixin = false) {
     const cache = asMixin ? mixinPropsCache : appContext.propsCache;
@@ -6425,6 +6678,14 @@ If you want to remount the same app, move your app creation logic into a factory
       }
       return EMPTY_ARR;
     }
+    baseNormalizePropsOptions(raw, normalized, needCastKeys);
+    const res = [normalized, needCastKeys];
+    if (isObject(comp)) {
+      cache.set(comp, res);
+    }
+    return res;
+  }
+  function baseNormalizePropsOptions(raw, normalized, needCastKeys) {
     if (isArray(raw)) {
       for (let i = 0; i < raw.length; i++) {
         if (!isString(raw[i])) {
@@ -6469,11 +6730,6 @@ If you want to remount the same app, move your app creation logic into a factory
         }
       }
     }
-    const res = [normalized, needCastKeys];
-    if (isObject(comp)) {
-      cache.set(comp, res);
-    }
-    return res;
   }
   function validatePropName(key) {
     if (key[0] !== "$" && !isReservedProp(key)) {
@@ -6495,26 +6751,26 @@ If you want to remount the same app, move your app creation logic into a factory
     }
     return "";
   }
-  function validateProps(rawProps, props, instance) {
-    const resolvedValues = toRaw(props);
-    const options = instance.propsOptions[0];
+  function validateProps(rawProps, resolvedProps, options) {
+    resolvedProps = toRaw(resolvedProps);
     const camelizePropsKey = Object.keys(rawProps).map((key) => camelize(key));
     for (const key in options) {
-      let opt = options[key];
-      if (opt == null) continue;
-      validateProp(
-        key,
-        resolvedValues[key],
-        opt,
-        shallowReadonly(resolvedValues) ,
-        !camelizePropsKey.includes(key)
-      );
+      const opt = options[key];
+      if (opt != null) {
+        validateProp(
+          key,
+          resolvedProps[key],
+          opt,
+          resolvedProps,
+          !camelizePropsKey.includes(key)
+        );
+      }
     }
   }
-  function validateProp(name, value, prop, props, isAbsent) {
-    const { type, required, validator, skipCheck } = prop;
+  function validateProp(key, value, propOptions, resolvedProps, isAbsent) {
+    const { type, required, validator, skipCheck } = propOptions;
     if (required && isAbsent) {
-      warn$1('Missing required prop: "' + name + '"');
+      warn$1('Missing required prop: "' + key + '"');
       return;
     }
     if (value == null && !required) {
@@ -6530,12 +6786,12 @@ If you want to remount the same app, move your app creation logic into a factory
         isValid = valid;
       }
       if (!isValid) {
-        warn$1(getInvalidTypeMessage(name, value, expectedTypes));
+        warn$1(getInvalidTypeMessage(key, value, expectedTypes));
         return;
       }
     }
-    if (validator && !validator(value, props)) {
-      warn$1('Invalid prop: custom validator check failed for prop "' + name + '".');
+    if (validator && !validator(value, shallowReadonly(resolvedProps) )) {
+      warn$1('Invalid prop: custom validator check failed for prop "' + key + '".');
     }
   }
   const isSimpleType = /* @__PURE__ */ makeMap(
@@ -6606,7 +6862,7 @@ If you want to remount the same app, move your app creation logic into a factory
       return rawSlot;
     }
     const normalized = withCtx((...args) => {
-      if (currentInstance && !(ctx === null && currentRenderingInstance) && !(ctx && ctx.root !== currentInstance.root)) {
+      if (currentInstance && !currentInstance.vapor && !(ctx === null && currentRenderingInstance) && !(ctx && ctx.root !== currentInstance.root)) {
         warn$1(
           `Slot "${key}" invoked outside of the render function: this will not track dependencies used in the slot. Invoke the slot function inside the render function instead.`
         );
@@ -6703,12 +6959,15 @@ If you want to remount the same app, move your app creation logic into a factory
 
   let supported;
   let perf;
+  let cachedNow$1 = 0;
+  const p$1 = /* @__PURE__ */ Promise.resolve();
+  const getNow$1 = () => cachedNow$1 || (p$1.then(() => cachedNow$1 = 0), cachedNow$1 = isSupported() ? perf.now() : Date.now());
   function startMeasure(instance, type) {
     if (instance.appContext.config.performance && isSupported()) {
       perf.mark(`vue-${type}-${instance.uid}`);
     }
     {
-      devtoolsPerfStart(instance, type, isSupported() ? perf.now() : Date.now());
+      devtoolsPerfStart(instance, type, getNow$1());
     }
   }
   function endMeasure(instance, type) {
@@ -6725,7 +6984,7 @@ If you want to remount the same app, move your app creation logic into a factory
       perf.clearMarks(endTag);
     }
     {
-      devtoolsPerfEnd(instance, type, isSupported() ? perf.now() : Date.now());
+      devtoolsPerfEnd(instance, type, getNow$1());
     }
   }
   function isSupported() {
@@ -6809,6 +7068,9 @@ If you want to remount the same app, move your app creation logic into a factory
             optimized
           );
           break;
+        case VaporSlot:
+          getVaporInterface(parentComponent, n2).slot(n1, n2, container, anchor);
+          break;
         default:
           if (shapeFlag & 1) {
             processElement(
@@ -7021,11 +7283,15 @@ If you want to remount the same app, move your app creation logic into a factory
       }
       hostInsert(el, container, anchor);
       if ((vnodeHook = props && props.onVnodeMounted) || needCallTransitionHooks || dirs) {
-        queuePostRenderEffect(() => {
-          vnodeHook && invokeVNodeHook(vnodeHook, parentComponent, vnode);
-          needCallTransitionHooks && transition.enter(el);
-          dirs && invokeDirectiveHook(vnode, null, parentComponent, "mounted");
-        }, parentSuspense);
+        queuePostRenderEffect(
+          () => {
+            vnodeHook && invokeVNodeHook(vnodeHook, parentComponent, vnode);
+            needCallTransitionHooks && transition.enter(el);
+            dirs && invokeDirectiveHook(vnode, null, parentComponent, "mounted");
+          },
+          void 0,
+          parentSuspense
+        );
       }
     };
     const setScopeId = (el, vnode, scopeId, slotScopeIds, parentComponent) => {
@@ -7037,8 +7303,8 @@ If you want to remount the same app, move your app creation logic into a factory
           hostSetScopeId(el, slotScopeIds[i]);
         }
       }
-      if (parentComponent) {
-        let subTree = parentComponent.subTree;
+      let subTree = parentComponent && parentComponent.subTree;
+      if (subTree) {
         if (subTree.patchFlag > 0 && subTree.patchFlag & 2048) {
           subTree = filterSingleRoot(subTree.children) || subTree;
         }
@@ -7155,10 +7421,14 @@ If you want to remount the same app, move your app creation logic into a factory
         patchProps(el, oldProps, newProps, parentComponent, namespace);
       }
       if ((vnodeHook = newProps.onVnodeUpdated) || dirs) {
-        queuePostRenderEffect(() => {
-          vnodeHook && invokeVNodeHook(vnodeHook, parentComponent, n2, n1);
-          dirs && invokeDirectiveHook(n2, n1, parentComponent, "updated");
-        }, parentSuspense);
+        queuePostRenderEffect(
+          () => {
+            vnodeHook && invokeVNodeHook(vnodeHook, parentComponent, n2, n1);
+            dirs && invokeDirectiveHook(n2, n1, parentComponent, "updated");
+          },
+          void 0,
+          parentSuspense
+        );
       }
     };
     const patchBlockChildren = (oldChildren, newChildren, fallbackContainer, parentComponent, parentSuspense, namespace, slotScopeIds) => {
@@ -7286,7 +7556,22 @@ If you want to remount the same app, move your app creation logic into a factory
     };
     const processComponent = (n1, n2, container, anchor, parentComponent, parentSuspense, namespace, slotScopeIds, optimized) => {
       n2.slotScopeIds = slotScopeIds;
-      if (n1 == null) {
+      if (n2.type.__vapor) {
+        if (n1 == null) {
+          getVaporInterface(parentComponent, n2).mount(
+            n2,
+            container,
+            anchor,
+            parentComponent
+          );
+        } else {
+          getVaporInterface(parentComponent, n2).update(
+            n1,
+            n2,
+            shouldUpdateComponent(n1, n2, optimized)
+          );
+        }
+      } else if (n1 == null) {
         if (n2.shapeFlag & 512) {
           parentComponent.ctx.activate(
             n2,
@@ -7372,15 +7657,52 @@ If you want to remount the same app, move your app creation logic into a factory
           return;
         } else {
           instance.next = n2;
-          instance.update();
+          instance.effect.run();
         }
       } else {
         n2.el = n1.el;
         instance.vnode = n2;
       }
     };
-    const setupRenderEffect = (instance, initialVNode, container, anchor, parentSuspense, namespace, optimized) => {
-      const componentUpdateFn = () => {
+    class SetupRenderEffect extends ReactiveEffect {
+      constructor(instance, initialVNode, container, anchor, parentSuspense, namespace, optimized) {
+        const prevScope = setCurrentScope(instance.scope);
+        super();
+        this.instance = instance;
+        this.initialVNode = initialVNode;
+        this.container = container;
+        this.anchor = anchor;
+        this.parentSuspense = parentSuspense;
+        this.namespace = namespace;
+        this.optimized = optimized;
+        setCurrentScope(prevScope);
+        this.job = instance.job = () => {
+          if (this.dirty) {
+            this.run();
+          }
+        };
+        this.job.i = instance;
+        {
+          this.onTrack = instance.rtc ? (e) => invokeArrayFns(instance.rtc, e) : void 0;
+          this.onTrigger = instance.rtg ? (e) => invokeArrayFns(instance.rtg, e) : void 0;
+        }
+      }
+      notify() {
+        if (!(this.flags & 256)) {
+          const job = this.job;
+          queueJob(job, job.i.uid);
+        }
+      }
+      fn() {
+        const {
+          instance,
+          initialVNode,
+          container,
+          anchor,
+          parentSuspense,
+          namespace,
+          optimized
+        } = this;
         if (!instance.isMounted) {
           let vnodeHook;
           const { el, props } = initialVNode;
@@ -7456,23 +7778,24 @@ If you want to remount the same app, move your app creation logic into a factory
             initialVNode.el = subTree.el;
           }
           if (m) {
-            queuePostRenderEffect(m, parentSuspense);
+            queuePostRenderEffect(m, void 0, parentSuspense);
           }
           if (!isAsyncWrapperVNode && (vnodeHook = props && props.onVnodeMounted)) {
             const scopedInitialVNode = initialVNode;
             queuePostRenderEffect(
               () => invokeVNodeHook(vnodeHook, parent, scopedInitialVNode),
+              void 0,
               parentSuspense
             );
           }
-          if (initialVNode.shapeFlag & 256 || parent && isAsyncWrapper(parent.vnode) && parent.vnode.shapeFlag & 256) {
-            instance.a && queuePostRenderEffect(instance.a, parentSuspense);
+          if (initialVNode.shapeFlag & 256 || parent && parent.vnode && isAsyncWrapper(parent.vnode) && parent.vnode.shapeFlag & 256) {
+            instance.a && queuePostRenderEffect(instance.a, void 0, parentSuspense);
           }
           instance.isMounted = true;
           {
             devtoolsComponentAdded(instance);
           }
-          initialVNode = container = anchor = null;
+          this.initialVNode = this.container = this.anchor = null;
         } else {
           let { next, bu, u, parent, vnode } = instance;
           {
@@ -7484,7 +7807,7 @@ If you want to remount the same app, move your app creation logic into a factory
               }
               nonHydratedAsyncRoot.asyncDep.then(() => {
                 if (!instance.isUnmounted) {
-                  componentUpdateFn();
+                  this.fn();
                 }
               });
               return;
@@ -7540,11 +7863,12 @@ If you want to remount the same app, move your app creation logic into a factory
             updateHOCHostEl(instance, nextTree.el);
           }
           if (u) {
-            queuePostRenderEffect(u, parentSuspense);
+            queuePostRenderEffect(u, void 0, parentSuspense);
           }
           if (vnodeHook = next.props && next.props.onVnodeUpdated) {
             queuePostRenderEffect(
               () => invokeVNodeHook(vnodeHook, parent, next, vnode),
+              void 0,
               parentSuspense
             );
           }
@@ -7555,21 +7879,21 @@ If you want to remount the same app, move your app creation logic into a factory
             popWarningContext();
           }
         }
-      };
-      instance.scope.on();
-      const effect = instance.effect = new ReactiveEffect(componentUpdateFn);
-      instance.scope.off();
-      const update = instance.update = effect.run.bind(effect);
-      const job = instance.job = effect.runIfDirty.bind(effect);
-      job.i = instance;
-      job.id = instance.uid;
-      effect.scheduler = () => queueJob(job);
-      toggleRecurse(instance, true);
-      {
-        effect.onTrack = instance.rtc ? (e) => invokeArrayFns(instance.rtc, e) : void 0;
-        effect.onTrigger = instance.rtg ? (e) => invokeArrayFns(instance.rtg, e) : void 0;
       }
-      update();
+    }
+    const setupRenderEffect = (instance, initialVNode, container, anchor, parentSuspense, namespace, optimized) => {
+      const effect = instance.effect = new SetupRenderEffect(
+        instance,
+        initialVNode,
+        container,
+        anchor,
+        parentSuspense,
+        namespace,
+        optimized
+      );
+      instance.update = effect.run.bind(effect);
+      toggleRecurse(instance, true);
+      effect.run();
     };
     const updateComponentPreRender = (instance, nextVNode, optimized) => {
       nextVNode.component = instance;
@@ -7578,9 +7902,9 @@ If you want to remount the same app, move your app creation logic into a factory
       instance.next = null;
       updateProps(instance, nextVNode.props, prevProps, optimized);
       updateSlots(instance, nextVNode.children, optimized);
-      pauseTracking();
+      const prevSub = setActiveSub();
       flushPreFlushCbs(instance);
-      resetTracking();
+      setActiveSub(prevSub);
     };
     const patchChildren = (n1, n2, container, anchor, parentComponent, parentSuspense, namespace, slotScopeIds, optimized = false) => {
       const c1 = n1 && n1.children;
@@ -7857,7 +8181,13 @@ If you want to remount the same app, move your app creation logic into a factory
             );
           } else if (moved) {
             if (j < 0 || i !== increasingNewIndexSequence[j]) {
-              move(nextChild, container, anchor, 2);
+              move(
+                nextChild,
+                container,
+                anchor,
+                2,
+                parentComponent
+              );
             } else {
               j--;
             }
@@ -7865,10 +8195,20 @@ If you want to remount the same app, move your app creation logic into a factory
         }
       }
     };
-    const move = (vnode, container, anchor, moveType, parentSuspense = null) => {
+    const move = (vnode, container, anchor, moveType, parentComponent, parentSuspense = null) => {
       const { el, type, transition, children, shapeFlag } = vnode;
       if (shapeFlag & 6) {
-        move(vnode.component.subTree, container, anchor, moveType);
+        if (type.__vapor) {
+          getVaporInterface(parentComponent, vnode).move(vnode, container, anchor);
+        } else {
+          move(
+            vnode.component.subTree,
+            container,
+            anchor,
+            moveType,
+            parentComponent
+          );
+        }
         return;
       }
       if (shapeFlag & 128) {
@@ -7876,13 +8216,25 @@ If you want to remount the same app, move your app creation logic into a factory
         return;
       }
       if (shapeFlag & 64) {
-        type.move(vnode, container, anchor, internals);
+        type.move(
+          vnode,
+          container,
+          anchor,
+          internals,
+          parentComponent
+        );
         return;
       }
       if (type === Fragment) {
         hostInsert(el, container, anchor);
         for (let i = 0; i < children.length; i++) {
-          move(children[i], container, anchor, moveType);
+          move(
+            children[i],
+            container,
+            anchor,
+            moveType,
+            parentComponent
+          );
         }
         hostInsert(vnode.anchor, container, anchor);
         return;
@@ -7896,7 +8248,11 @@ If you want to remount the same app, move your app creation logic into a factory
         if (moveType === 0) {
           transition.beforeEnter(el);
           hostInsert(el, container, anchor);
-          queuePostRenderEffect(() => transition.enter(el), parentSuspense);
+          queuePostRenderEffect(
+            () => transition.enter(el),
+            void 0,
+            parentSuspense
+          );
         } else {
           const { leave, delayLeave, afterLeave } = transition;
           const remove2 = () => {
@@ -7938,9 +8294,9 @@ If you want to remount the same app, move your app creation logic into a factory
         optimized = false;
       }
       if (ref != null) {
-        pauseTracking();
+        const prevSub = setActiveSub();
         setRef(ref, null, parentSuspense, vnode, true);
-        resetTracking();
+        setActiveSub(prevSub);
       }
       if (cacheIndex != null) {
         parentComponent.renderCache[cacheIndex] = void 0;
@@ -7956,7 +8312,12 @@ If you want to remount the same app, move your app creation logic into a factory
         invokeVNodeHook(vnodeHook, parentComponent, vnode);
       }
       if (shapeFlag & 6) {
-        unmountComponent(vnode.component, parentSuspense, doRemove);
+        if (type.__vapor) {
+          getVaporInterface(parentComponent, vnode).unmount(vnode, doRemove);
+          return;
+        } else {
+          unmountComponent(vnode.component, parentSuspense, doRemove);
+        }
       } else {
         if (shapeFlag & 128) {
           vnode.suspense.unmount(parentSuspense, doRemove);
@@ -7990,15 +8351,23 @@ If you want to remount the same app, move your app creation logic into a factory
         } else if (type === Fragment && patchFlag & (128 | 256) || !optimized && shapeFlag & 16) {
           unmountChildren(children, parentComponent, parentSuspense);
         }
+        if (type === VaporSlot) {
+          getVaporInterface(parentComponent, vnode).unmount(vnode, doRemove);
+          return;
+        }
         if (doRemove) {
           remove(vnode);
         }
       }
       if (shouldInvokeVnodeHook && (vnodeHook = props && props.onVnodeUnmounted) || shouldInvokeDirs) {
-        queuePostRenderEffect(() => {
-          vnodeHook && invokeVNodeHook(vnodeHook, parentComponent, vnode);
-          shouldInvokeDirs && invokeDirectiveHook(vnode, null, parentComponent, "unmounted");
-        }, parentSuspense);
+        queuePostRenderEffect(
+          () => {
+            vnodeHook && invokeVNodeHook(vnodeHook, parentComponent, vnode);
+            shouldInvokeDirs && invokeDirectiveHook(vnode, null, parentComponent, "unmounted");
+          },
+          void 0,
+          parentSuspense
+        );
       }
     };
     const remove = (vnode) => {
@@ -8055,7 +8424,7 @@ If you want to remount the same app, move your app creation logic into a factory
       const {
         bum,
         scope,
-        job,
+        effect,
         subTree,
         um,
         m,
@@ -8074,16 +8443,18 @@ If you want to remount the same app, move your app creation logic into a factory
         });
       }
       scope.stop();
-      if (job) {
-        job.flags |= 8;
+      if (effect) {
+        effect.stop();
         unmount(subTree, instance, parentSuspense, doRemove);
       }
       if (um) {
-        queuePostRenderEffect(um, parentSuspense);
+        queuePostRenderEffect(um, void 0, parentSuspense);
       }
-      queuePostRenderEffect(() => {
-        instance.isUnmounted = true;
-      }, parentSuspense);
+      queuePostRenderEffect(
+        () => instance.isUnmounted = true,
+        void 0,
+        parentSuspense
+      );
       if (parentSuspense && parentSuspense.pendingBranch && !parentSuspense.isUnmounted && instance.asyncDep && !instance.asyncResolved && instance.suspenseId === parentSuspense.pendingId) {
         parentSuspense.deps--;
         if (parentSuspense.deps === 0) {
@@ -8101,6 +8472,9 @@ If you want to remount the same app, move your app creation logic into a factory
     };
     const getNextHostNode = (vnode) => {
       if (vnode.shapeFlag & 6) {
+        if (vnode.type.__vapor) {
+          return hostNextSibling(vnode.component.block);
+        }
         return getNextHostNode(vnode.component.subTree);
       }
       if (vnode.shapeFlag & 128) {
@@ -8110,7 +8484,6 @@ If you want to remount the same app, move your app creation logic into a factory
       const teleportEnd = el && el[TeleportEndKey];
       return teleportEnd ? hostNextSibling(teleportEnd) : el;
     };
-    let isFlushing = false;
     const render = (vnode, container, namespace) => {
       if (vnode == null) {
         if (container._vnode) {
@@ -8128,12 +8501,7 @@ If you want to remount the same app, move your app creation logic into a factory
         );
       }
       container._vnode = vnode;
-      if (!isFlushing) {
-        isFlushing = true;
-        flushPreFlushCbs();
-        flushPostFlushCbs();
-        isFlushing = false;
-      }
+      flushOnAppMount();
     };
     const internals = {
       p: patch,
@@ -8141,6 +8509,7 @@ If you want to remount the same app, move your app creation logic into a factory
       m: move,
       r: remove,
       mt: mountComponent,
+      umt: unmountComponent,
       mc: mountChildren,
       pc: patchChildren,
       pbc: patchBlockChildren,
@@ -8154,22 +8523,53 @@ If you want to remount the same app, move your app creation logic into a factory
         internals
       );
     }
+    const mountApp = (app, container, isHydrate, namespace) => {
+      const vnode = app._ceVNode || createVNode(app._component, app._props);
+      vnode.appContext = app._context;
+      if (namespace === true) {
+        namespace = "svg";
+      } else if (namespace === false) {
+        namespace = void 0;
+      }
+      {
+        app._context.reload = () => {
+          const cloned = cloneVNode(vnode);
+          cloned.el = null;
+          render(cloned, container, namespace);
+        };
+      }
+      if (isHydrate && hydrate) {
+        hydrate(vnode, container);
+      } else {
+        render(vnode, container, namespace);
+      }
+      return vnode.component;
+    };
+    const unmountApp = (app) => {
+      render(null, app._container);
+    };
     return {
       render,
       hydrate,
-      createApp: createAppAPI(render, hydrate)
+      internals,
+      createApp: createAppAPI(
+        mountApp,
+        unmountApp,
+        getComponentPublicInstance)
     };
   }
   function resolveChildrenNamespace({ type, props }, currentNamespace) {
     return currentNamespace === "svg" && type === "foreignObject" || currentNamespace === "mathml" && type === "annotation-xml" && props && props.encoding && props.encoding.includes("html") ? void 0 : currentNamespace;
   }
-  function toggleRecurse({ effect, job }, allowed) {
-    if (allowed) {
-      effect.flags |= 32;
-      job.flags |= 4;
-    } else {
-      effect.flags &= -33;
-      job.flags &= -5;
+  function toggleRecurse({ effect, job, vapor }, allowed) {
+    if (!vapor) {
+      if (allowed) {
+        effect.flags |= 128;
+        job.flags |= 2;
+      } else {
+        effect.flags &= -129;
+        job.flags &= -3;
+      }
     }
   }
   function needTransition(parentSuspense, transition) {
@@ -8202,46 +8602,6 @@ If you want to remount the same app, move your app creation logic into a factory
       }
     }
   }
-  function getSequence(arr) {
-    const p = arr.slice();
-    const result = [0];
-    let i, j, u, v, c;
-    const len = arr.length;
-    for (i = 0; i < len; i++) {
-      const arrI = arr[i];
-      if (arrI !== 0) {
-        j = result[result.length - 1];
-        if (arr[j] < arrI) {
-          p[i] = j;
-          result.push(i);
-          continue;
-        }
-        u = 0;
-        v = result.length - 1;
-        while (u < v) {
-          c = u + v >> 1;
-          if (arr[result[c]] < arrI) {
-            u = c + 1;
-          } else {
-            v = c;
-          }
-        }
-        if (arrI < arr[result[u]]) {
-          if (u > 0) {
-            p[i] = result[u - 1];
-          }
-          result[u] = i;
-        }
-      }
-    }
-    u = result.length;
-    v = result[u - 1];
-    while (u-- > 0) {
-      result[u] = v;
-      v = p[v];
-    }
-    return result;
-  }
   function locateNonHydratedAsyncRoot(instance) {
     const subComponent = instance.subTree.component;
     if (subComponent) {
@@ -8255,8 +8615,22 @@ If you want to remount the same app, move your app creation logic into a factory
   function invalidateMount(hooks) {
     if (hooks) {
       for (let i = 0; i < hooks.length; i++)
-        hooks[i].flags |= 8;
+        hooks[i].flags |= 4;
+    }
+  }
+  function getVaporInterface(instance, vnode) {
+    const ctx = instance ? instance.appContext : vnode.appContext;
+    const res = ctx && ctx.vapor;
+    if (!res) {
+      warn$1(
+        `Vapor component found in vdom tree but vapor-in-vdom interop was not installed. Make sure to install it:
+\`\`\`
+import { vaporInteropPlugin } from 'vue'
+app.use(vaporInteropPlugin)
+\`\`\``
+      );
     }
+    return res;
   }
 
   const ssrContextKey = Symbol.for("v-scx");
@@ -8291,8 +8665,41 @@ If you want to remount the same app, move your app creation logic into a factory
     }
     return doWatch(source, cb, options);
   }
+  class RenderWatcherEffect extends WatcherEffect {
+    constructor(instance, source, cb, options, flush) {
+      super(source, cb, options);
+      this.flush = flush;
+      const job = () => {
+        if (this.dirty) {
+          this.run();
+        }
+      };
+      if (cb) {
+        this.flags |= 128;
+        job.flags |= 2;
+      }
+      if (instance) {
+        job.i = instance;
+      }
+      this.job = job;
+    }
+    notify() {
+      const flags = this.flags;
+      if (!(flags & 256)) {
+        const flush = this.flush;
+        const job = this.job;
+        if (flush === "post") {
+          queuePostRenderEffect(job, void 0, job.i ? job.i.suspense : null);
+        } else if (flush === "pre") {
+          queueJob(job, job.i ? job.i.uid : void 0, true);
+        } else {
+          job();
+        }
+      }
+    }
+  }
   function doWatch(source, cb, options = EMPTY_OBJ) {
-    const { immediate, deep, flush, once } = options;
+    const { immediate, deep, flush = "pre", once } = options;
     if (!cb) {
       if (immediate !== void 0) {
         warn$1(
@@ -8314,35 +8721,25 @@ If you want to remount the same app, move your app creation logic into a factory
     baseWatchOptions.onWarn = warn$1;
     const instance = currentInstance;
     baseWatchOptions.call = (fn, type, args) => callWithAsyncErrorHandling(fn, instance, type, args);
-    let isPre = false;
-    if (flush === "post") {
-      baseWatchOptions.scheduler = (job) => {
-        queuePostRenderEffect(job, instance && instance.suspense);
-      };
-    } else if (flush !== "sync") {
-      isPre = true;
-      baseWatchOptions.scheduler = (job, isFirstRun) => {
-        if (isFirstRun) {
-          job();
-        } else {
-          queueJob(job);
-        }
-      };
+    const effect = new RenderWatcherEffect(
+      instance,
+      source,
+      cb,
+      baseWatchOptions,
+      flush
+    );
+    if (cb) {
+      effect.run(true);
+    } else if (flush === "post") {
+      queuePostRenderEffect(effect.job, void 0, instance && instance.suspense);
+    } else {
+      effect.run(true);
     }
-    baseWatchOptions.augmentJob = (job) => {
-      if (cb) {
-        job.flags |= 4;
-      }
-      if (isPre) {
-        job.flags |= 2;
-        if (instance) {
-          job.id = instance.uid;
-          job.i = instance;
-        }
-      }
-    };
-    const watchHandle = watch$1(source, cb, baseWatchOptions);
-    return watchHandle;
+    const stop = effect.stop.bind(effect);
+    stop.pause = effect.pause.bind(effect);
+    stop.resume = effect.resume.bind(effect);
+    stop.stop = stop;
+    return stop;
   }
   function instanceWatch(source, value, options) {
     const publicThis = this.proxy;
@@ -8354,9 +8751,9 @@ If you want to remount the same app, move your app creation logic into a factory
       cb = value.handler;
       options = value;
     }
-    const reset = setCurrentInstance(this);
+    const prev = setCurrentInstance(this);
     const res = doWatch(getter, cb.bind(publicThis), options);
-    reset();
+    setCurrentInstance(...prev);
     return res;
   }
   function createPathGetter(ctx, path) {
@@ -8371,7 +8768,7 @@ If you want to remount the same app, move your app creation logic into a factory
   }
 
   function useModel(props, name, options = EMPTY_OBJ) {
-    const i = getCurrentInstance();
+    const i = getCurrentGenericInstance();
     if (!i) {
       warn$1(`useModel() called without active instance.`);
       return ref();
@@ -8382,7 +8779,7 @@ If you want to remount the same app, move your app creation logic into a factory
       return ref();
     }
     const hyphenatedName = hyphenate(name);
-    const modifiers = getModelModifiers(props, camelizedName);
+    const modifiers = getModelModifiers(props, camelizedName, defaultPropGetter);
     const res = customRef((track, trigger) => {
       let localValue;
       let prevSetValue = EMPTY_OBJ;
@@ -8404,9 +8801,25 @@ If you want to remount the same app, move your app creation logic into a factory
           if (!hasChanged(emittedValue, localValue) && !(prevSetValue !== EMPTY_OBJ && hasChanged(value, prevSetValue))) {
             return;
           }
-          const rawProps = i.vnode.props;
-          if (!(rawProps && // check if parent has passed v-model
-          (name in rawProps || camelizedName in rawProps || hyphenatedName in rawProps) && (`onUpdate:${name}` in rawProps || `onUpdate:${camelizedName}` in rawProps || `onUpdate:${hyphenatedName}` in rawProps))) {
+          let rawPropKeys;
+          let parentPassedModelValue = false;
+          let parentPassedModelUpdater = false;
+          if (i.rawKeys) {
+            rawPropKeys = i.rawKeys();
+          } else {
+            const rawProps = i.vnode.props;
+            rawPropKeys = rawProps && Object.keys(rawProps);
+          }
+          if (rawPropKeys) {
+            for (const key of rawPropKeys) {
+              if (key === name || key === camelizedName || key === hyphenatedName) {
+                parentPassedModelValue = true;
+              } else if (key === `onUpdate:${name}` || key === `onUpdate:${camelizedName}` || key === `onUpdate:${hyphenatedName}`) {
+                parentPassedModelUpdater = true;
+              }
+            }
+          }
+          if (!parentPassedModelValue || !parentPassedModelUpdater) {
             localValue = value;
             trigger();
           }
@@ -8433,21 +8846,26 @@ If you want to remount the same app, move your app creation logic into a factory
     };
     return res;
   }
-  const getModelModifiers = (props, modelName) => {
-    return modelName === "modelValue" || modelName === "model-value" ? props.modelModifiers : props[`${modelName}Modifiers`] || props[`${camelize(modelName)}Modifiers`] || props[`${hyphenate(modelName)}Modifiers`];
+  const getModelModifiers = (props, modelName, getter) => {
+    return modelName === "modelValue" || modelName === "model-value" ? getter(props, "modelModifiers") : getter(props, `${modelName}Modifiers`) || getter(props, `${camelize(modelName)}Modifiers`) || getter(props, `${hyphenate(modelName)}Modifiers`);
   };
 
   function emit(instance, event, ...rawArgs) {
+    return baseEmit(
+      instance,
+      instance.vnode.props || EMPTY_OBJ,
+      defaultPropGetter,
+      event,
+      ...rawArgs
+    );
+  }
+  function baseEmit(instance, props, getter, event, ...rawArgs) {
     if (instance.isUnmounted) return;
-    const props = instance.vnode.props || EMPTY_OBJ;
     {
-      const {
-        emitsOptions,
-        propsOptions: [propsOptions]
-      } = instance;
+      const { emitsOptions, propsOptions } = instance;
       if (emitsOptions) {
         if (!(event in emitsOptions) && true) {
-          if (!propsOptions || !(toHandlerKey(camelize(event)) in propsOptions)) {
+          if (!propsOptions || !propsOptions[0] || !(toHandlerKey(camelize(event)) in propsOptions[0])) {
             warn$1(
               `Component emitted event "${event}" but it is neither declared in the emits option nor as an "${toHandlerKey(camelize(event))}" prop.`
             );
@@ -8467,7 +8885,7 @@ If you want to remount the same app, move your app creation logic into a factory
     }
     let args = rawArgs;
     const isModelListener = event.startsWith("update:");
-    const modifiers = isModelListener && getModelModifiers(props, event.slice(7));
+    const modifiers = isModelListener && getModelModifiers(props, event.slice(7), getter);
     if (modifiers) {
       if (modifiers.trim) {
         args = rawArgs.map((a) => isString(a) ? a.trim() : a);
@@ -8481,7 +8899,7 @@ If you want to remount the same app, move your app creation logic into a factory
     }
     {
       const lowerCaseEvent = event.toLowerCase();
-      if (lowerCaseEvent !== event && props[toHandlerKey(lowerCaseEvent)]) {
+      if (lowerCaseEvent !== event && getter(props, toHandlerKey(lowerCaseEvent))) {
         warn$1(
           `Event "${lowerCaseEvent}" is emitted in component ${formatComponentName(
           instance,
@@ -8493,10 +8911,10 @@ If you want to remount the same app, move your app creation logic into a factory
       }
     }
     let handlerName;
-    let handler = props[handlerName = toHandlerKey(event)] || // also try camelCase event handler (#2249)
-    props[handlerName = toHandlerKey(camelize(event))];
+    let handler = getter(props, handlerName = toHandlerKey(event)) || // also try camelCase event handler (#2249)
+    getter(props, handlerName = toHandlerKey(camelize(event)));
     if (!handler && isModelListener) {
-      handler = props[handlerName = toHandlerKey(hyphenate(event))];
+      handler = getter(props, handlerName = toHandlerKey(hyphenate(event)));
     }
     if (handler) {
       callWithAsyncErrorHandling(
@@ -8506,7 +8924,7 @@ If you want to remount the same app, move your app creation logic into a factory
         args
       );
     }
-    const onceHandler = props[handlerName + `Once`];
+    const onceHandler = getter(props, handlerName + `Once`);
     if (onceHandler) {
       if (!instance.emitted) {
         instance.emitted = {};
@@ -8522,6 +8940,9 @@ If you want to remount the same app, move your app creation logic into a factory
       );
     }
   }
+  function defaultPropGetter(props, key) {
+    return props[key];
+  }
   function normalizeEmitsOptions(comp, appContext, asMixin = false) {
     const cache = appContext.emitsCache;
     const cached = cache.get(comp);
@@ -8849,7 +9270,7 @@ If you want to remount the same app, move your app creation logic into a factory
     return false;
   }
   function updateHOCHostEl({ vnode, parent }, el) {
-    while (parent) {
+    while (parent && !parent.vapor) {
       const root = parent.subTree;
       if (root.suspense && root.suspense.activeBranch === vnode) {
         root.el = vnode.el;
@@ -9200,7 +9621,8 @@ If you want to remount the same app, move your app creation logic into a factory
                   pendingBranch,
                   container2,
                   anchor === initialAnchor ? next(activeBranch) : anchor,
-                  0
+                  0,
+                  parentComponent2
                 );
                 queuePostFlushCb(effects);
               }
@@ -9213,7 +9635,13 @@ If you want to remount the same app, move your app creation logic into a factory
             unmount(activeBranch, parentComponent2, suspense, true);
           }
           if (!delayEnter) {
-            move(pendingBranch, container2, anchor, 0);
+            move(
+              pendingBranch,
+              container2,
+              anchor,
+              0,
+              parentComponent2
+            );
           }
         }
         setActiveBranch(suspense, pendingBranch);
@@ -9286,7 +9714,7 @@ If you want to remount the same app, move your app creation logic into a factory
         }
       },
       move(container2, anchor2, type) {
-        suspense.activeBranch && move(suspense.activeBranch, container2, anchor2, type);
+        suspense.activeBranch && move(suspense.activeBranch, container2, anchor2, type, parentComponent);
         suspense.container = container2;
       },
       next() {
@@ -9426,7 +9854,7 @@ If you want to remount the same app, move your app creation logic into a factory
     }
     return s;
   }
-  function queueEffectWithSuspense(fn, suspense) {
+  function queueEffectWithSuspense(fn, id, suspense) {
     if (suspense && suspense.pendingBranch) {
       if (isArray(fn)) {
         suspense.effects.push(...fn);
@@ -9434,7 +9862,7 @@ If you want to remount the same app, move your app creation logic into a factory
         suspense.effects.push(fn);
       }
     } else {
-      queuePostFlushCb(fn);
+      queuePostFlushCb(fn, id);
     }
   }
   function setActiveBranch(suspense, branch) {
@@ -9460,6 +9888,7 @@ If you want to remount the same app, move your app creation logic into a factory
   const Text = Symbol.for("v-txt");
   const Comment = Symbol.for("v-cmt");
   const Static = Symbol.for("v-stc");
+  const VaporSlot = Symbol.for("v-vps");
   const blockStack = [];
   let currentBlock = null;
   function openBlock(disableTracking = false) {
@@ -9833,6 +10262,28 @@ Component that was made reactive: `,
     ]);
   }
 
+  let currentInstance = null;
+  const getCurrentGenericInstance = () => currentInstance || currentRenderingInstance;
+  const getCurrentInstance = () => currentInstance && !currentInstance.vapor ? currentInstance : currentRenderingInstance;
+  let isInSSRComponentSetup = false;
+  let setInSSRSetupState;
+  let simpleSetCurrentInstance;
+  {
+    simpleSetCurrentInstance = (i) => {
+      currentInstance = i;
+    };
+    setInSSRSetupState = (v) => {
+      isInSSRComponentSetup = v;
+    };
+  }
+  const setCurrentInstance = (instance, scope = instance !== null ? instance.scope : void 0) => {
+    try {
+      return [currentInstance, setCurrentScope(scope)];
+    } finally {
+      simpleSetCurrentInstance(instance);
+    }
+  };
+
   const emptyAppContext = createAppContext();
   let uid = 0;
   function createComponentInstance(vnode, parent, suspense) {
@@ -9877,7 +10328,7 @@ Component that was made reactive: `,
       // to be set immediately
       emitted: null,
       // props default value
-      propsDefaults: EMPTY_OBJ,
+      propsDefaults: null,
       // inheritAttrs
       inheritAttrs: type.inheritAttrs,
       // state
@@ -9924,32 +10375,6 @@ Component that was made reactive: `,
     }
     return instance;
   }
-  let currentInstance = null;
-  const getCurrentInstance = () => currentInstance || currentRenderingInstance;
-  let internalSetCurrentInstance;
-  let setInSSRSetupState;
-  {
-    internalSetCurrentInstance = (i) => {
-      currentInstance = i;
-    };
-    setInSSRSetupState = (v) => {
-      isInSSRComponentSetup = v;
-    };
-  }
-  const setCurrentInstance = (instance) => {
-    const prev = currentInstance;
-    internalSetCurrentInstance(instance);
-    instance.scope.on();
-    return () => {
-      instance.scope.off();
-      internalSetCurrentInstance(prev);
-    };
-  };
-  const unsetCurrentInstance = () => {
-    currentInstance && currentInstance.scope.off();
-    internalSetCurrentInstance(null);
-  };
-  const isBuiltInTag = /* @__PURE__ */ makeMap("slot,component");
   function validateComponentName(name, { isNativeTag }) {
     if (isBuiltInTag(name) || isNativeTag(name)) {
       warn$1(
@@ -9960,13 +10385,16 @@ Component that was made reactive: `,
   function isStatefulComponent(instance) {
     return instance.vnode.shapeFlag & 4;
   }
-  let isInSSRComponentSetup = false;
   function setupComponent(instance, isSSR = false, optimized = false) {
     isSSR && setInSSRSetupState(isSSR);
-    const { props, children } = instance.vnode;
+    const { props, children, vi } = instance.vnode;
     const isStateful = isStatefulComponent(instance);
-    initProps(instance, props, isStateful, isSSR);
-    initSlots(instance, children, optimized || isSSR);
+    if (vi) {
+      vi(instance);
+    } else {
+      initProps(instance, props, isStateful, isSSR);
+      initSlots(instance, children, optimized || isSSR);
+    }
     const setupResult = isStateful ? setupStatefulComponent(instance, isSSR) : void 0;
     isSSR && setInSSRSetupState(false);
     return setupResult;
@@ -10003,9 +10431,9 @@ Component that was made reactive: `,
     }
     const { setup } = Component;
     if (setup) {
-      pauseTracking();
+      const prevSub = setActiveSub();
       const setupContext = instance.setupContext = setup.length > 1 ? createSetupContext(instance) : null;
-      const reset = setCurrentInstance(instance);
+      const prev = setCurrentInstance(instance);
       const setupResult = callWithErrorHandling(
         setup,
         instance,
@@ -10016,12 +10444,15 @@ Component that was made reactive: `,
         ]
       );
       const isAsyncSetup = isPromise(setupResult);
-      resetTracking();
-      reset();
+      setActiveSub(prevSub);
+      setCurrentInstance(...prev);
       if ((isAsyncSetup || instance.sp) && !isAsyncWrapper(instance)) {
         markAsyncBoundary(instance);
       }
       if (isAsyncSetup) {
+        const unsetCurrentInstance = () => {
+          setCurrentInstance(null, void 0);
+        };
         setupResult.then(unsetCurrentInstance, unsetCurrentInstance);
         if (isSSR) {
           return setupResult.then((resolvedResult) => {
@@ -10114,13 +10545,13 @@ Component that was made reactive: `,
       }
     }
     {
-      const reset = setCurrentInstance(instance);
-      pauseTracking();
+      const prevInstance = setCurrentInstance(instance);
+      const prevSub = setActiveSub();
       try {
         applyOptions(instance);
       } finally {
-        resetTracking();
-        reset();
+        setActiveSub(prevSub);
+        setCurrentInstance(...prevInstance);
       }
     }
     if (!Component.render && instance.render === NOOP && !isSSR) {
@@ -10157,29 +10588,6 @@ Component that was made reactive: `,
     });
   }
   function createSetupContext(instance) {
-    const expose = (exposed) => {
-      {
-        if (instance.exposed) {
-          warn$1(`expose() should be called only once per setup().`);
-        }
-        if (exposed != null) {
-          let exposedType = typeof exposed;
-          if (exposedType === "object") {
-            if (isArray(exposed)) {
-              exposedType = "array";
-            } else if (isRef(exposed)) {
-              exposedType = "ref";
-            }
-          }
-          if (exposedType !== "object") {
-            warn$1(
-              `expose() should be passed a plain object, received ${exposedType}.`
-            );
-          }
-        }
-      }
-      instance.exposed = exposed || {};
-    };
     {
       let attrsProxy;
       let slotsProxy;
@@ -10193,10 +10601,33 @@ Component that was made reactive: `,
         get emit() {
           return (event, ...args) => instance.emit(event, ...args);
         },
-        expose
+        expose: (exposed) => expose(instance, exposed)
       });
     }
   }
+  function expose(instance, exposed) {
+    {
+      if (instance.exposed) {
+        warn$1(`expose() should be called only once per setup().`);
+      }
+      if (exposed != null) {
+        let exposedType = typeof exposed;
+        if (exposedType === "object") {
+          if (isArray(exposed)) {
+            exposedType = "array";
+          } else if (isRef(exposed)) {
+            exposedType = "ref";
+          }
+        }
+        if (exposedType !== "object") {
+          warn$1(
+            `expose() should be passed a plain object, received ${exposedType}.`
+          );
+        }
+      }
+    }
+    instance.exposed = exposed || {};
+  }
   function getComponentPublicInstance(instance) {
     if (instance.exposed) {
       return instance.exposeProxy || (instance.exposeProxy = new Proxy(proxyRefs(markRaw(instance.exposed)), {
@@ -10204,7 +10635,9 @@ Component that was made reactive: `,
           if (key in target) {
             return target[key];
           } else if (key in publicPropertiesMap) {
-            return publicPropertiesMap[key](instance);
+            return publicPropertiesMap[key](
+              instance
+            );
           }
         },
         has(target, key) {
@@ -10247,14 +10680,7 @@ Component that was made reactive: `,
   }
 
   const computed = (getterOrOptions, debugOptions) => {
-    const c = computed$1(getterOrOptions, debugOptions, isInSSRComponentSetup);
-    {
-      const i = getCurrentInstance();
-      if (i && i.appContext.config.warnRecursiveComputed) {
-        c._warnRecursive = true;
-      }
-    }
-    return c;
+    return computed$1(getterOrOptions, debugOptions, isInSSRComponentSetup);
   };
 
   function h(type, propsOrChildren, children) {
@@ -10295,9 +10721,9 @@ Component that was made reactive: `,
         if (obj.__isVue) {
           return ["div", vueStyle, `VueInstance`];
         } else if (isRef(obj)) {
-          pauseTracking();
+          const prevSub = setActiveSub();
           const value = obj.value;
-          resetTracking();
+          setActiveSub(prevSub);
           return [
             "div",
             {},
@@ -10484,7 +10910,7 @@ Component that was made reactive: `,
     return true;
   }
 
-  const version = "3.5.17";
+  const version = "3.6.0-alpha.1";
   const warn = warn$1 ;
   const ErrorTypeStrings = ErrorTypeStrings$1 ;
   const devtools = devtools$1 ;
@@ -10978,8 +11404,9 @@ Component that was made reactive: `,
       const style = el.style;
       let cssText = "";
       for (const key in vars) {
-        style.setProperty(`--${key}`, vars[key]);
-        cssText += `--${key}: ${vars[key]};`;
+        const value = normalizeCssVarValue(vars[key]);
+        style.setProperty(`--${key}`, value);
+        cssText += `--${key}: ${value};`;
       }
       style[CSS_VAR_TEXT] = cssText;
     }
@@ -11036,11 +11463,11 @@ Component that was made reactive: `,
   }
   const semicolonRE = /[^\\];\s*$/;
   const importantRE = /\s*!important$/;
-  function setStyle(style, name, val) {
-    if (isArray(val)) {
-      val.forEach((v) => setStyle(style, name, v));
+  function setStyle(style, name, rawVal) {
+    if (isArray(rawVal)) {
+      rawVal.forEach((v) => setStyle(style, name, v));
     } else {
-      if (val == null) val = "";
+      const val = rawVal == null ? "" : String(rawVal);
       {
         if (semicolonRE.test(val)) {
           warn(
@@ -11113,8 +11540,7 @@ Component that was made reactive: `,
       return;
     }
     const tag = el.tagName;
-    if (key === "value" && tag !== "PROGRESS" && // custom elements may use _value internally
-    !tag.includes("-")) {
+    if (key === "value" && canSetValueDirectly(tag)) {
       const oldValue = tag === "OPTION" ? el.getAttribute("value") || "" : el.value;
       const newValue = value == null ? (
         // #11647: value should be set as empty string for null and undefined,
@@ -11242,8 +11668,6 @@ Expected function or array of functions, received type ${typeof value}.`
     }
   }
 
-  const isNativeOn = (key) => key.charCodeAt(0) === 111 && key.charCodeAt(1) === 110 && // lowercase letter
-  key.charCodeAt(2) > 96 && key.charCodeAt(2) < 123;
   const patchProp = (el, key, prevValue, nextValue, namespace, parentComponent) => {
     const isSVG = namespace === "svg";
     if (key === "class") {
@@ -11283,24 +11707,9 @@ Expected function or array of functions, received type ${typeof value}.`
       }
       return false;
     }
-    if (key === "spellcheck" || key === "draggable" || key === "translate" || key === "autocorrect") {
-      return false;
-    }
-    if (key === "form") {
-      return false;
-    }
-    if (key === "list" && el.tagName === "INPUT") {
-      return false;
-    }
-    if (key === "type" && el.tagName === "TEXTAREA") {
+    if (shouldSetAsAttr(el.tagName, key)) {
       return false;
     }
-    if (key === "width" || key === "height") {
-      const tag = el.tagName;
-      if (tag === "IMG" || tag === "VIDEO" || tag === "CANVAS" || tag === "SOURCE") {
-        return false;
-      }
-    }
     if (isNativeOn(key) && isString(value)) {
       return false;
     }
@@ -11894,28 +12303,12 @@ Expected function or array of functions, received type ${typeof value}.`
   const vModelText = {
     created(el, { modifiers: { lazy, trim, number } }, vnode) {
       el[assignKey] = getModelAssigner(vnode);
-      const castToNumber = number || vnode.props && vnode.props.type === "number";
-      addEventListener(el, lazy ? "change" : "input", (e) => {
-        if (e.target.composing) return;
-        let domValue = el.value;
-        if (trim) {
-          domValue = domValue.trim();
-        }
-        if (castToNumber) {
-          domValue = looseToNumber(domValue);
-        }
-        el[assignKey](domValue);
-      });
-      if (trim) {
-        addEventListener(el, "change", () => {
-          el.value = el.value.trim();
-        });
-      }
-      if (!lazy) {
-        addEventListener(el, "compositionstart", onCompositionStart);
-        addEventListener(el, "compositionend", onCompositionEnd);
-        addEventListener(el, "change", onCompositionEnd);
-      }
+      vModelTextInit(
+        el,
+        trim,
+        number || !!(vnode.props && vnode.props.type === "number"),
+        lazy
+      );
     },
     // set value on mounted so it's after min/max for type="range"
     mounted(el, { value }) {
@@ -11923,70 +12316,111 @@ Expected function or array of functions, received type ${typeof value}.`
     },
     beforeUpdate(el, { value, oldValue, modifiers: { lazy, trim, number } }, vnode) {
       el[assignKey] = getModelAssigner(vnode);
-      if (el.composing) return;
-      const elValue = (number || el.type === "number") && !/^0\d/.test(el.value) ? looseToNumber(el.value) : el.value;
-      const newValue = value == null ? "" : value;
-      if (elValue === newValue) {
+      vModelTextUpdate(el, oldValue, value, trim, number, lazy);
+    }
+  };
+  const vModelTextInit = (el, trim, number, lazy, set) => {
+    addEventListener(el, lazy ? "change" : "input", (e) => {
+      if (e.target.composing) return;
+      let domValue = el.value;
+      if (trim) {
+        domValue = domValue.trim();
+      }
+      if (number || el.type === "number") {
+        domValue = looseToNumber(domValue);
+      }
+      (0, el[assignKey])(domValue);
+    });
+    if (trim) {
+      addEventListener(el, "change", () => {
+        el.value = el.value.trim();
+      });
+    }
+    if (!lazy) {
+      addEventListener(el, "compositionstart", onCompositionStart);
+      addEventListener(el, "compositionend", onCompositionEnd);
+      addEventListener(el, "change", onCompositionEnd);
+    }
+  };
+  const vModelTextUpdate = (el, oldValue, value, trim, number, lazy) => {
+    if (el.composing) return;
+    const elValue = (number || el.type === "number") && !/^0\d/.test(el.value) ? looseToNumber(el.value) : el.value;
+    const newValue = value == null ? "" : value;
+    if (elValue === newValue) {
+      return;
+    }
+    if (document.activeElement === el && el.type !== "range") {
+      if (lazy && value === oldValue) {
         return;
       }
-      if (document.activeElement === el && el.type !== "range") {
-        if (lazy && value === oldValue) {
-          return;
-        }
-        if (trim && el.value.trim() === newValue) {
-          return;
-        }
+      if (trim && el.value.trim() === newValue) {
+        return;
       }
-      el.value = newValue;
     }
+    el.value = newValue;
   };
   const vModelCheckbox = {
     // #4096 array checkboxes need to be deep traversed
     deep: true,
     created(el, _, vnode) {
       el[assignKey] = getModelAssigner(vnode);
-      addEventListener(el, "change", () => {
-        const modelValue = el._modelValue;
-        const elementValue = getValue(el);
-        const checked = el.checked;
-        const assign = el[assignKey];
-        if (isArray(modelValue)) {
-          const index = looseIndexOf(modelValue, elementValue);
-          const found = index !== -1;
-          if (checked && !found) {
-            assign(modelValue.concat(elementValue));
-          } else if (!checked && found) {
-            const filtered = [...modelValue];
-            filtered.splice(index, 1);
-            assign(filtered);
-          }
-        } else if (isSet(modelValue)) {
-          const cloned = new Set(modelValue);
-          if (checked) {
-            cloned.add(elementValue);
-          } else {
-            cloned.delete(elementValue);
-          }
-          assign(cloned);
-        } else {
-          assign(getCheckboxValue(el, checked));
-        }
-      });
+      vModelCheckboxInit(el);
     },
     // set initial checked on mount to wait for true-value/false-value
-    mounted: setChecked,
+    mounted(el, binding, vnode) {
+      vModelCheckboxUpdate(
+        el,
+        binding.oldValue,
+        binding.value,
+        vnode.props.value
+      );
+    },
     beforeUpdate(el, binding, vnode) {
       el[assignKey] = getModelAssigner(vnode);
-      setChecked(el, binding, vnode);
+      vModelCheckboxUpdate(
+        el,
+        binding.oldValue,
+        binding.value,
+        vnode.props.value
+      );
     }
   };
-  function setChecked(el, { value, oldValue }, vnode) {
+  const vModelCheckboxInit = (el, set) => {
+    addEventListener(el, "change", () => {
+      const assign = el[assignKey];
+      const modelValue = el._modelValue;
+      const elementValue = getValue(el);
+      const checked = el.checked;
+      if (isArray(modelValue)) {
+        const index = looseIndexOf(modelValue, elementValue);
+        const found = index !== -1;
+        if (checked && !found) {
+          assign(modelValue.concat(elementValue));
+        } else if (!checked && found) {
+          const filtered = [...modelValue];
+          filtered.splice(index, 1);
+          assign(filtered);
+        }
+      } else if (isSet(modelValue)) {
+        const cloned = new Set(modelValue);
+        if (checked) {
+          cloned.add(elementValue);
+        } else {
+          cloned.delete(elementValue);
+        }
+        assign(cloned);
+      } else {
+        assign(getCheckboxValue(el, checked));
+      }
+    });
+  };
+  const vModelCheckboxUpdate = (el, oldValue, value, rawValue = getValue(el)) => {
     el._modelValue = value;
     let checked;
     if (isArray(value)) {
-      checked = looseIndexOf(value, vnode.props.value) > -1;
+      checked = looseIndexOf(value, rawValue) > -1;
     } else if (isSet(value)) {
-      checked = value.has(vnode.props.value);
+      checked = value.has(rawValue);
     } else {
       if (value === oldValue) return;
       checked = looseEqual(value, getCheckboxValue(el, true));
@@ -11994,7 +12428,7 @@ Expected function or array of functions, received type ${typeof value}.`
     if (el.checked !== checked) {
       el.checked = checked;
     }
-  }
+  };
   const vModelRadio = {
     created(el, { value }, vnode) {
       el.checked = looseEqual(value, vnode.props.value);
@@ -12014,36 +12448,38 @@ Expected function or array of functions, received type ${typeof value}.`
     // <select multiple> value need to be deep traversed
     deep: true,
     created(el, { value, modifiers: { number } }, vnode) {
-      const isSetModel = isSet(value);
-      addEventListener(el, "change", () => {
-        const selectedVal = Array.prototype.filter.call(el.options, (o) => o.selected).map(
-          (o) => number ? looseToNumber(getValue(o)) : getValue(o)
-        );
-        el[assignKey](
-          el.multiple ? isSetModel ? new Set(selectedVal) : selectedVal : selectedVal[0]
-        );
-        el._assigning = true;
-        nextTick(() => {
-          el._assigning = false;
-        });
-      });
+      vModelSelectInit(el, value, number);
       el[assignKey] = getModelAssigner(vnode);
     },
     // set value in mounted & updated because <select> relies on its children
     // <option>s.
     mounted(el, { value }) {
-      setSelected(el, value);
+      vModelSetSelected(el, value);
     },
     beforeUpdate(el, _binding, vnode) {
       el[assignKey] = getModelAssigner(vnode);
     },
     updated(el, { value }) {
-      if (!el._assigning) {
-        setSelected(el, value);
-      }
+      vModelSetSelected(el, value);
     }
   };
-  function setSelected(el, value) {
+  const vModelSelectInit = (el, value, number, set) => {
+    const isSetModel = isSet(value);
+    addEventListener(el, "change", () => {
+      const selectedVal = Array.prototype.filter.call(el.options, (o) => o.selected).map(
+        (o) => number ? looseToNumber(getValue(o)) : getValue(o)
+      );
+      (0, el[assignKey])(
+        el.multiple ? isSetModel ? new Set(selectedVal) : selectedVal : selectedVal[0]
+      );
+      el._assigning = true;
+      nextTick(() => {
+        el._assigning = false;
+      });
+    });
+  };
+  const vModelSetSelected = (el, value) => {
+    if (el._assigning) return;
     const isMultiple = el.multiple;
     const isArrayValue = isArray(value);
     if (isMultiple && !isArrayValue && !isSet(value)) {
@@ -12074,13 +12510,20 @@ Expected function or array of functions, received type ${typeof value}.`
     if (!isMultiple && el.selectedIndex !== -1) {
       el.selectedIndex = -1;
     }
-  }
+  };
   function getValue(el) {
     return "_value" in el ? el._value : el.value;
   }
   function getCheckboxValue(el, checked) {
     const key = checked ? "_trueValue" : "_falseValue";
-    return key in el ? el[key] : checked;
+    if (key in el) {
+      return el[key];
+    }
+    const attr = checked ? "true-value" : "false-value";
+    if (el.hasAttribute(attr)) {
+      return el.getAttribute(attr);
+    }
+    return checked;
   }
   const vModelDynamic = {
     created(el, binding, vnode) {