vue 3.5.17 → 3.6.0-alpha.2

package/dist/vue.global.js

@@ -1,5 +1,5 @@
 /**
-* vue v3.5.17
+* vue v3.6.0-alpha.2
 * (c) 2018-present Yuxi (Evan) You and Vue contributors
 * @license MIT
 **/
@@ -21,6 +21,8 @@ var Vue = (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 Vue = (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 Vue = (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(
@@ -115,6 +117,10 @@ var Vue = (function (exports) {
       (_, val) => typeof val === "function" ? val.toString() : val
     );
   }
+  function canSetValueDirectly(tagName) {
+    return tagName !== "PROGRESS" && // custom elements may use _value internally
+    !tagName.includes("-");
+  }
 
   const PatchFlagNames = {
     [1]: `TEXT`,
@@ -289,6 +295,24 @@ var Vue = (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) {
@@ -352,7 +376,20 @@ var Vue = (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)) {
@@ -387,604 +424,404 @@ var Vue = (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();
+  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;
         }
-      }
-    }
-    /**
-     * 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();
-            }
+        u = 0;
+        v = result.length - 1;
+        while (u < v) {
+          c = u + v >> 1;
+          if (arr[result[c]] < arrI) {
+            u = c + 1;
+          } else {
+            v = c;
           }
-          for (i = 0, l = this.effects.length; i < l; i++) {
-            this.effects[i].resume();
+        }
+        if (arrI < arr[result[u]]) {
+          if (u > 0) {
+            p[i] = result[u - 1];
           }
+          result[u] = i;
         }
       }
     }
-    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.`);
-      }
+    u = result.length;
+    v = result[u - 1];
+    while (u-- > 0) {
+      result[u] = v;
+      v = p[v];
     }
-    /**
-     * This should only be called on non-detached scopes
-     * @internal
-     */
-    on() {
-      if (++this._on === 1) {
-        this.prevScope = activeEffectScope;
-        activeEffectScope = this;
-      }
+    return result;
+  }
+
+  function normalizeCssVarValue(value) {
+    if (value == null) {
+      return "initial";
     }
-    /**
-     * 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;
-      }
+    if (typeof value === "string") {
+      return value === "" ? " " : value;
     }
-    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]();
-        }
-        this.cleanups.length = 0;
-        if (this.scopes) {
-          for (i = 0, l = this.scopes.length; i < l; i++) {
-            this.scopes[i].stop(true);
-          }
-          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;
-          }
-        }
-        this.parent = void 0;
+    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
+        );
       }
     }
+    return String(value);
   }
-  function effectScope(detached) {
-    return new EffectScope(detached);
+
+  function warn$2(msg, ...args) {
+    console.warn(`[Vue warn] ${msg}`, ...args);
   }
-  function getCurrentScope() {
-    return activeEffectScope;
+
+  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 activeSub = void 0;
+  let notifyIndex = 0;
+  let notifyBufferLength = 0;
+  function setActiveSub(sub) {
+    try {
+      return activeSub;
+    } finally {
+      activeSub = sub;
+    }
   }
-  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.`
-      );
+  function startBatch() {
+    ++batchDepth;
+  }
+  function endBatch() {
+    if (!--batchDepth && notifyBufferLength) {
+      flush();
     }
   }
-
-  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);
+  function link(dep, sub) {
+    const prevDep = sub.depsTail;
+    if (prevDep !== void 0 && prevDep.dep === dep) {
+      return;
+    }
+    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;
       }
     }
-    pause() {
-      this.flags |= 64;
+    const prevSub = dep.subsTail;
+    const newLink = sub.depsTail = dep.subsTail = {
+      dep,
+      sub,
+      prevDep,
+      nextDep,
+      prevSub,
+      nextSub: void 0
+    };
+    if (nextDep !== void 0) {
+      nextDep.prevDep = newLink;
     }
-    resume() {
-      if (this.flags & 64) {
-        this.flags &= -65;
-        if (pausedQueueEffects.has(this)) {
-          pausedQueueEffects.delete(this);
-          this.trigger();
-        }
-      }
+    if (prevDep !== void 0) {
+      prevDep.nextDep = newLink;
+    } else {
+      sub.deps = newLink;
     }
-    /**
-     * @internal
-     */
-    notify() {
-      if (this.flags & 2 && !(this.flags & 32)) {
-        return;
-      }
-      if (!(this.flags & 8)) {
-        batch(this);
-      }
+    if (prevSub !== void 0) {
+      prevSub.nextSub = newLink;
+    } else {
+      dep.subs = newLink;
     }
-    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."
-          );
+  }
+  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 (prevDep !== void 0) {
+      prevDep.nextDep = nextDep;
+    } else {
+      sub.deps = nextDep;
+    }
+    if (nextSub !== void 0) {
+      nextSub.prevSub = prevSub;
+    } else {
+      dep.subsTail = prevSub;
+    }
+    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;
+          }
         }
-        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);
+      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;
         }
-        this.deps = this.depsTail = void 0;
-        cleanupEffect(this);
-        this.onStop && this.onStop();
-        this.flags &= -2;
       }
+      break;
+    } while (true);
+  }
+  function startTracking(sub) {
+    sub.depsTail = void 0;
+    sub.flags = sub.flags & -57 | 4 /* RecursedCheck */;
+    return setActiveSub(sub);
+  }
+  function endTracking(sub, prevSub) {
+    if (activeSub !== sub) {
+      warn$2(
+        "Active effect was not restored correctly - this is likely a Vue internal bug."
+      );
     }
-    trigger() {
-      if (this.flags & 64) {
-        pausedQueueEffects.add(this);
-      } else if (this.scheduler) {
-        this.scheduler();
-      } else {
-        this.runIfDirty();
+    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;
       }
-    }
-    /**
-     * @internal
-     */
-    runIfDirty() {
-      if (isDirty(this)) {
-        this.run();
+      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);
     }
-    get dirty() {
-      return isDirty(this);
+    return false;
+  }
+
+  const triggerEventInfos = [];
+  function onTrack(sub, debugInfo) {
+    if (sub.onTrack) {
+      sub.onTrack(
+        extend(
+          {
+            effect: sub
+          },
+          debugInfo
+        )
+      );
     }
   }
-  let batchDepth = 0;
-  let batchedSub;
-  let batchedComputed;
-  function batch(sub, isComputed = false) {
-    sub.flags |= 8;
-    if (isComputed) {
-      sub.next = batchedComputed;
-      batchedComputed = sub;
-      return;
+  function onTrigger(sub) {
+    if (sub.onTrigger) {
+      const debugInfo = triggerEventInfos[triggerEventInfos.length - 1];
+      sub.onTrigger(
+        extend(
+          {
+            effect: sub
+          },
+          debugInfo
+        )
+      );
     }
-    sub.next = batchedSub;
-    batchedSub = sub;
   }
-  function startBatch() {
-    batchDepth++;
+  function setupOnTrigger(target) {
+    Object.defineProperty(target.prototype, "onTrigger", {
+      get() {
+        return this._onTrigger;
+      },
+      set(val) {
+        if (val && !this._onTrigger) setupFlagsHandler(this);
+        this._onTrigger = val;
+      }
+    });
   }
-  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;
-          }
+  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);
         }
-        e = next;
+        target._flags = value;
       }
-    }
-    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;
+
+  class Dep {
+    constructor(map, key) {
+      this.map = map;
+      this.key = key;
+      this._subs = void 0;
+      this.subsTail = void 0;
+      this.flags = ReactiveFlags.None;
     }
-  }
-  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;
+    get subs() {
+      return this._subs;
+    }
+    set subs(value) {
+      this._subs = value;
+      if (value === void 0) {
+        this.map.delete(this.key);
       }
-      link.dep.activeLink = link.prevActiveLink;
-      link.prevActiveLink = void 0;
-      link = prev;
-    }
-    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;
-      }
-    }
-    if (sub._dirty) {
-      return true;
-    }
-    return false;
-  }
-  function refreshComputed(computed) {
-    if (computed.flags & 4 && !(computed.flags & 16)) {
-      return;
-    }
-    computed.flags &= -17;
-    if (computed.globalVersion === globalVersion) {
-      return;
-    }
-    computed.globalVersion = globalVersion;
-    if (!computed.isSSR && computed.flags & 128 && (!computed.deps && !computed._dirty || !isDirty(computed))) {
-      return;
-    }
-    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;
-    }
-  }
-  function removeSub(link, soft = false) {
-    const { dep, prevSub, nextSub } = link;
-    if (prevSub) {
-      prevSub.nextSub = nextSub;
-      link.prevSub = void 0;
-    }
-    if (nextSub) {
-      nextSub.prevSub = prevSub;
-      link.nextSub = void 0;
-    }
-    if (dep.subsHead === link) {
-      dep.subsHead = nextSub;
-    }
-    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 (!soft && !--dep.sc && dep.map) {
-      dep.map.delete(dep.key);
-    }
-  }
-  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 effect(fn, options) {
-    if (fn.effect instanceof ReactiveEffect) {
-      fn = fn.effect.fn;
-    }
-    const e = new ReactiveEffect(fn);
-    if (options) {
-      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();
-  }
-  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;
-      }
-    }
-  }
-
-  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;
-    }
-  }
-  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);
-    }
-    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 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);
-        }
-      }
-      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;
-      }
-      link.dep.subs = link;
     }
   }
   const targetMap = /* @__PURE__ */ new WeakMap();
@@ -998,36 +835,34 @@ var Vue = (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,
@@ -1036,6 +871,11 @@ var Vue = (function (exports) {
             oldTarget
           });
         }
+        propagate(dep.subs);
+        shallowPropagate(dep.subs);
+        {
+          triggerEventInfos.pop();
+        }
       }
     };
     startBatch();
@@ -1260,11 +1100,11 @@ var Vue = (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;
   }
 
@@ -1310,14 +1150,18 @@ var Vue = (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;
       }
@@ -1769,33 +1613,47 @@ var Vue = (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;
     }
@@ -1804,30 +1662,55 @@ var Vue = (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) {
@@ -1853,13 +1736,21 @@ var Vue = (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();
     }
@@ -1871,9 +1762,6 @@ var Vue = (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);
@@ -1926,69 +1814,331 @@ var Vue = (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 prevScope = activeEffectScope;
+      try {
+        activeEffectScope = this;
+        return fn();
+      } finally {
+        activeEffectScope = prevScope;
+      }
+    }
+    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;
     }
@@ -1999,6 +2149,23 @@ var Vue = (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;
@@ -2009,7 +2176,7 @@ var Vue = (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;
@@ -2030,177 +2197,146 @@ var Vue = (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, 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();
         };
       }
-    } 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);
+      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;
       }
-    };
-    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) {
+    run(initialRun = false) {
+      const oldValue = this.oldValue;
+      const newValue = this.oldValue = super.run();
+      if (!this.cb) {
         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();
-      }
-    };
-    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);
+      const { immediate, deep, call } = this.options;
+      if (initialRun && !immediate) {
+        return;
       }
-    };
-    {
-      effect.onTrack = options.onTrack;
-      effect.onTrigger = options.onTrigger;
-    }
-    if (cb) {
-      if (immediate) {
-        job(true);
-      } else {
-        oldValue = effect.run();
+      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"]) {
@@ -2236,8 +2372,8 @@ var Vue = (function (exports) {
   }
 
   const stack$1 = [];
-  function pushWarningContext(vnode) {
-    stack$1.push(vnode);
+  function pushWarningContext(ctx) {
+    stack$1.push(ctx);
   }
   function popWarningContext() {
     stack$1.pop();
@@ -2246,8 +2382,9 @@ var Vue = (function (exports) {
   function warn$1(msg, ...args) {
     if (isWarning) return;
     isWarning = true;
-    pauseTracking();
-    const instance = stack$1.length ? stack$1[stack$1.length - 1].component : null;
+    const prevSub = setActiveSub();
+    const entry = stack$1.length ? stack$1[stack$1.length - 1] : null;
+    const instance = isVNode(entry) ? entry.component : entry;
     const appWarnHandler = instance && instance.appContext.config.warnHandler;
     const trace = getComponentTrace();
     if (appWarnHandler) {
@@ -2261,9 +2398,9 @@ var Vue = (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
         ]
@@ -2277,27 +2414,31 @@ var Vue = (function (exports) {
       }
       console.warn(...warnArgs);
     }
-    resetTracking();
+    setActiveSub(prevSub);
     isWarning = false;
   }
   function getComponentTrace() {
-    let currentVNode = stack$1[stack$1.length - 1];
-    if (!currentVNode) {
+    let currentCtx = stack$1[stack$1.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;
   }
@@ -2309,16 +2450,13 @@ var Vue = (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 = [];
@@ -2450,11 +2588,10 @@ var Vue = (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;
@@ -2468,26 +2605,26 @@ var Vue = (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) {
@@ -2498,26 +2635,23 @@ var Vue = (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;
@@ -2525,130 +2659,168 @@ var Vue = (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);
       }
     }
@@ -2715,10 +2887,17 @@ var Vue = (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) {
@@ -2727,42 +2906,54 @@ var Vue = (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(() => {
@@ -2975,14 +3166,14 @@ var Vue = (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);
       }
     }
   }
@@ -3082,29 +3273,37 @@ var Vue = (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;
@@ -3151,6 +3350,7 @@ var Vue = (function (exports) {
               container,
               mainAnchor,
               internals,
+              parentComponent,
               1
             );
           } else {
@@ -3170,6 +3370,7 @@ var Vue = (function (exports) {
                 nextTarget,
                 null,
                 internals,
+                parentComponent,
                 0
               );
             } else {
@@ -3185,6 +3386,7 @@ var Vue = (function (exports) {
               target,
               targetAnchor,
               internals,
+              parentComponent,
               1
             );
           }
@@ -3224,7 +3426,7 @@ var Vue = (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);
     }
@@ -3240,7 +3442,8 @@ var Vue = (function (exports) {
             children[i],
             container,
             parentAnchor,
-            2
+            2,
+            parentComponent
           );
         }
       }
@@ -3425,7 +3628,7 @@ var Vue = (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;
@@ -3704,7 +3907,7 @@ var Vue = (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 {
@@ -3720,7 +3923,7 @@ var Vue = (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;
@@ -3840,8 +4043,7 @@ var Vue = (function (exports) {
           }
         };
         if (value) {
-          doSet.id = -1;
-          queuePostRenderEffect(doSet, parentSuspense);
+          queuePostRenderEffect(doSet, -1, parentSuspense);
         } else {
           doSet();
         }
@@ -4009,6 +4211,9 @@ var Vue = (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) {
@@ -4170,11 +4375,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;
@@ -4454,14 +4663,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";
@@ -4720,7 +4931,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) => {
@@ -4763,15 +4974,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,
@@ -4782,58 +4993,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) => {
@@ -4865,12 +5098,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));
           }
         }
       };
@@ -4878,12 +5118,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);
@@ -4969,7 +5209,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) {
@@ -4983,7 +5223,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);
         }
@@ -5015,12 +5255,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);
@@ -5091,7 +5333,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) {
@@ -5185,7 +5431,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,
@@ -5194,7 +5446,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.`
@@ -5249,8 +5500,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 = (
@@ -5543,11 +5795,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(
@@ -5595,14 +5852,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);
@@ -6046,7 +6303,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);
@@ -6139,33 +6396,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.
@@ -6188,7 +6427,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);
@@ -6229,6 +6468,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().`);
@@ -6243,9 +6483,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) {
@@ -6258,7 +6498,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 = {};
@@ -6266,7 +6506,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);
@@ -6276,7 +6516,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);
@@ -6328,11 +6568,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 {
@@ -6359,10 +6598,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
               );
             }
@@ -6384,7 +6623,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) {
@@ -6413,39 +6652,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;
@@ -6464,6 +6701,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;
@@ -6498,6 +6746,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])) {
@@ -6542,11 +6798,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)) {
@@ -6568,26 +6819,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) {
@@ -6603,12 +6854,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(
@@ -6679,7 +6930,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.`
         );
@@ -6776,12 +7027,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) {
@@ -6798,7 +7052,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() {
@@ -6882,6 +7136,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(
@@ -7094,11 +7351,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) => {
@@ -7110,8 +7371,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;
         }
@@ -7228,10 +7489,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) => {
@@ -7359,7 +7624,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,
@@ -7445,15 +7725,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;
@@ -7529,23 +7846,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;
           {
@@ -7557,7 +7875,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;
@@ -7613,11 +7931,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
             );
           }
@@ -7628,21 +7947,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;
@@ -7651,9 +7970,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;
@@ -7930,7 +8249,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--;
             }
@@ -7938,10 +8263,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) {
@@ -7949,13 +8284,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;
@@ -7969,7 +8316,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 = () => {
@@ -8011,9 +8362,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;
@@ -8029,7 +8380,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);
@@ -8063,15 +8419,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) => {
@@ -8128,7 +8492,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,
@@ -8147,16 +8511,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) {
@@ -8174,6 +8540,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) {
@@ -8183,7 +8552,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) {
@@ -8201,12 +8569,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,
@@ -8214,6 +8577,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,
@@ -8227,22 +8591,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) {
@@ -8275,48 +8670,8 @@ 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;
+    const subComponent = instance.vapor ? null : instance.subTree.component;
     if (subComponent) {
       if (subComponent.asyncDep && !subComponent.asyncResolved) {
         return subComponent;
@@ -8328,8 +8683,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");
@@ -8364,8 +8733,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(
@@ -8387,35 +8789,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;
@@ -8427,9 +8819,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) {
@@ -8444,7 +8836,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();
@@ -8455,7 +8847,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;
@@ -8477,9 +8869,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();
           }
@@ -8506,21 +8914,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.`
             );
@@ -8540,7 +8953,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);
@@ -8554,7 +8967,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,
@@ -8566,10 +8979,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(
@@ -8579,7 +8992,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 = {};
@@ -8595,6 +9008,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);
@@ -8922,7 +9338,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;
@@ -9273,7 +9689,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);
               }
@@ -9286,7 +9703,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);
@@ -9359,7 +9782,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() {
@@ -9499,7 +9922,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);
@@ -9507,7 +9930,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) {
@@ -9533,6 +9956,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) {
@@ -9906,6 +10330,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) {
@@ -9950,7 +10396,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
@@ -9997,32 +10443,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(
@@ -10033,13 +10453,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;
@@ -10076,9 +10499,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,
@@ -10089,12 +10512,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) => {
@@ -10187,13 +10613,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) {
@@ -10230,29 +10656,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;
@@ -10266,10 +10669,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)), {
@@ -10277,7 +10703,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) {
@@ -10320,14 +10748,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) {
@@ -10368,9 +10789,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",
             {},
@@ -10557,7 +10978,7 @@ Component that was made reactive: `,
     return true;
   }
 
-  const version = "3.5.17";
+  const version = "3.6.0-alpha.2";
   const warn = warn$1 ;
   const ErrorTypeStrings = ErrorTypeStrings$1 ;
   const devtools = devtools$1 ;
@@ -11051,8 +11472,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;
     }
@@ -11109,11 +11531,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(
@@ -11186,8 +11608,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,
@@ -11315,8 +11736,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") {
@@ -11356,24 +11775,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;
     }
@@ -11967,28 +12371,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 }) {
@@ -11996,70 +12384,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));
@@ -12067,7 +12496,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);
@@ -12087,36 +12516,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)) {
@@ -12147,13 +12578,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) {
@@ -14724,6 +15162,10 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
     }
   }
 
+  function getSelfName(filename) {
+    const nameMatch = filename.replace(/\?.*$/, "").match(/([^/\\]+)\.\w+$/);
+    return nameMatch ? capitalize(camelize(nameMatch[1])) : null;
+  }
   function createTransformContext(root, {
     filename = "",
     prefixIdentifiers = false,
@@ -14748,11 +15190,10 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
     onWarn = defaultOnWarn,
     compatConfig
   }) {
-    const nameMatch = filename.replace(/\?.*$/, "").match(/([^/\\]+)\.\w+$/);
     const context = {
       // options
       filename,
-      selfName: nameMatch && capitalize(camelize(nameMatch[1])),
+      selfName: getSelfName(filename),
       prefixIdentifiers,
       hoistStatic,
       hmr,
@@ -15055,7 +15496,7 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
       helper(key) {
         return `_${helperNameMap[key]}`;
       },
-      push(code, newlineIndex = -2 /* None */, node) {
+      push(code, newlineIndex = -2, node) {
         context.code += code;
       },
       indent() {
@@ -15073,7 +15514,7 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
       }
     };
     function newline(n) {
-      context.push("\n" + `  `.repeat(n), 0 /* Start */);
+      context.push("\n" + `  `.repeat(n), 0);
     }
     return context;
   }
@@ -15111,7 +15552,7 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
         push(
           `const { ${helpers.map(aliasHelper).join(", ")} } = _Vue
 `,
-          -1 /* End */
+          -1
         );
         newline();
       }
@@ -15136,7 +15577,7 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
     }
     if (ast.components.length || ast.directives.length || ast.temps) {
       push(`
-`, 0 /* Start */);
+`, 0);
       newline();
     }
     if (!ssr) {
@@ -15157,7 +15598,8 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
       ast,
       code: context.code,
       preamble: ``,
-      map: context.map ? context.map.toJSON() : void 0
+      map: context.map ? context.map.toJSON() : void 0,
+      helpers: ast.helpers
     };
   }
   function genFunctionPreamble(ast, context) {
@@ -15175,7 +15617,7 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
     if (helpers.length > 0) {
       {
         push(`const _Vue = ${VueBinding}
-`, -1 /* End */);
+`, -1);
         if (ast.hoists.length) {
           const staticHelpers = [
             CREATE_VNODE,
@@ -15185,7 +15627,7 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
             CREATE_STATIC
           ].filter((helper) => helpers.includes(helper)).map(aliasHelper).join(", ");
           push(`const { ${staticHelpers} } = _Vue
-`, -1 /* End */);
+`, -1);
         }
       }
     }
@@ -15244,7 +15686,7 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
     for (let i = 0; i < nodes.length; i++) {
       const node = nodes[i];
       if (isString(node)) {
-        push(node, -3 /* Unknown */);
+        push(node, -3);
       } else if (isArray(node)) {
         genNodeListAsArray(node, context);
       } else {
@@ -15262,7 +15704,7 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
   }
   function genNode(node, context) {
     if (isString(node)) {
-      context.push(node, -3 /* Unknown */);
+      context.push(node, -3);
       return;
     }
     if (isSymbol(node)) {
@@ -15344,13 +15786,13 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
     }
   }
   function genText(node, context) {
-    context.push(JSON.stringify(node.content), -3 /* Unknown */, node);
+    context.push(JSON.stringify(node.content), -3, node);
   }
   function genExpression(node, context) {
     const { content, isStatic } = node;
     context.push(
       isStatic ? JSON.stringify(content) : content,
-      -3 /* Unknown */,
+      -3,
       node
     );
   }
@@ -15365,7 +15807,7 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
     for (let i = 0; i < node.children.length; i++) {
       const child = node.children[i];
       if (isString(child)) {
-        context.push(child, -3 /* Unknown */);
+        context.push(child, -3);
       } else {
         genNode(child, context);
       }
@@ -15379,9 +15821,9 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
       push(`]`);
     } else if (node.isStatic) {
       const text = isSimpleIdentifier(node.content) ? node.content : JSON.stringify(node.content);
-      push(text, -2 /* None */, node);
+      push(text, -2, node);
     } else {
-      push(`[${node.content}]`, -3 /* Unknown */, node);
+      push(`[${node.content}]`, -3, node);
     }
   }
   function genComment(node, context) {
@@ -15391,7 +15833,7 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
     }
     push(
       `${helper(CREATE_COMMENT)}(${JSON.stringify(node.content)})`,
-      -3 /* Unknown */,
+      -3,
       node
     );
   }
@@ -15429,7 +15871,7 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
       push(PURE_ANNOTATION);
     }
     const callHelper = isBlock ? getVNodeBlockHelper(context.inSSR, isComponent) : getVNodeHelper(context.inSSR, isComponent);
-    push(helper(callHelper) + `(`, -2 /* None */, node);
+    push(helper(callHelper) + `(`, -2, node);
     genNodeList(
       genNullableArgs([tag, props, children, patchFlagString, dynamicProps]),
       context
@@ -15457,7 +15899,7 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
     if (pure) {
       push(PURE_ANNOTATION);
     }
-    push(callee + `(`, -2 /* None */, node);
+    push(callee + `(`, -2, node);
     genNodeList(node.arguments, context);
     push(`)`);
   }
@@ -15465,7 +15907,7 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
     const { push, indent, deindent, newline } = context;
     const { properties } = node;
     if (!properties.length) {
-      push(`{}`, -2 /* None */, node);
+      push(`{}`, -2, node);
       return;
     }
     const multilines = properties.length > 1 || properties.some((p) => p.value.type !== 4);
@@ -15493,7 +15935,7 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
     if (isSlot) {
       push(`_${helperNameMap[WITH_CTX]}(`);
     }
-    push(`(`, -2 /* None */, node);
+    push(`(`, -2, node);
     if (isArray(params)) {
       genNodeList(params, context);
     } else if (params) {
@@ -17460,7 +17902,9 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
     [60]: `Unnecessary value binding used alongside v-model. It will interfere with v-model's behavior.`,
     [61]: `v-show is missing expression.`,
     [62]: `<Transition> expects exactly one child element or component.`,
-    [63]: `Tags with side effect (<script> and <style>) are ignored in client component templates.`
+    [63]: `Tags with side effect (<script> and <style>) are ignored in client component templates.`,
+    // just to fulfill types
+    [64]: ``
   };
 
   const transformVHtml = (dir, node, context) => {
@@ -17612,9 +18056,10 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
       if (isEventOptionModifier(modifier)) {
         eventOptionModifiers.push(modifier);
       } else {
+        const keyString = isString(key) ? key : isStaticExp(key) ? key.content : null;
         if (maybeKeyModifier(modifier)) {
-          if (isStaticExp(key)) {
-            if (isKeyboardEvent(key.content.toLowerCase())) {
+          if (keyString) {
+            if (isKeyboardEvent(keyString.toLowerCase())) {
               keyModifiers.push(modifier);
             } else {
               nonKeyModifiers.push(modifier);