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

package/dist/runtime-dom.esm-browser.js

@@ -1,5 +1,5 @@
 /**
-* @vue/runtime-dom v3.5.17
+* @vue/runtime-dom v3.6.0-alpha.1
 * (c) 2018-present Yuxi (Evan) You and Vue contributors
 * @license MIT
 **/
@@ -18,6 +18,8 @@ const NOOP = () => {
 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) => {
@@ -51,6 +53,7 @@ const isReservedProp = /* @__PURE__ */ makeMap(
   // 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"
 );
@@ -62,10 +65,9 @@ const cacheStringFunction = (fn) => {
   };
 };
 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(
@@ -106,6 +108,10 @@ let _globalThis;
 const getGlobalThis = () => {
   return _globalThis || (_globalThis = typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : {});
 };
+function canSetValueDirectly(tagName) {
+  return tagName !== "PROGRESS" && // custom elements may use _value internally
+  !tagName.includes("-");
+}
 
 const GLOBALS_ALLOWED = "Infinity,undefined,NaN,isFinite,isNaN,parseFloat,parseInt,decodeURI,decodeURIComponent,encodeURI,encodeURIComponent,Math,Number,Date,Array,Object,Boolean,String,RegExp,Map,Set,JSON,Intl,BigInt,console,Error,Symbol";
 const isGloballyAllowed = /* @__PURE__ */ makeMap(GLOBALS_ALLOWED);
@@ -213,6 +219,24 @@ function isRenderableAttrValue(value) {
   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) {
@@ -276,7 +300,20 @@ const isRef$1 = (val) => {
   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)) {
@@ -311,604 +348,407 @@ const stringifySymbol = (v, i = "") => {
   );
 };
 
-function warn$2(msg, ...args) {
-  console.warn(`[Vue warn] ${msg}`, ...args);
-}
-
-let activeEffectScope;
-class EffectScope {
-  constructor(detached = false) {
-    this.detached = detached;
-    /**
-     * @internal
-     */
-    this._active = true;
-    /**
-     * @internal track `on` calls, allow `on` call multiple times
-     */
-    this._on = 0;
-    /**
-     * @internal
-     */
-    this.effects = [];
-    /**
-     * @internal
-     */
-    this.cleanups = [];
-    this._isPaused = false;
-    this.parent = activeEffectScope;
-    if (!detached && activeEffectScope) {
-      this.index = (activeEffectScope.scopes || (activeEffectScope.scopes = [])).push(
-        this
-      ) - 1;
-    }
-  }
-  get active() {
-    return this._active;
-  }
-  pause() {
-    if (this._active) {
-      this._isPaused = true;
-      let i, l;
-      if (this.scopes) {
-        for (i = 0, l = this.scopes.length; i < l; i++) {
-          this.scopes[i].pause();
-        }
-      }
-      for (i = 0, l = this.effects.length; i < l; i++) {
-        this.effects[i].pause();
-      }
-    }
-  }
-  /**
-   * Resumes the effect scope, including all child scopes and effects.
-   */
-  resume() {
-    if (this._active) {
-      if (this._isPaused) {
-        this._isPaused = false;
-        let i, l;
-        if (this.scopes) {
-          for (i = 0, l = this.scopes.length; i < l; i++) {
-            this.scopes[i].resume();
-          }
-        }
-        for (i = 0, l = this.effects.length; i < l; i++) {
-          this.effects[i].resume();
-        }
-      }
-    }
-  }
-  run(fn) {
-    if (this._active) {
-      const currentEffectScope = activeEffectScope;
-      try {
-        activeEffectScope = this;
-        return fn();
-      } finally {
-        activeEffectScope = currentEffectScope;
-      }
-    } else {
-      warn$2(`cannot run an inactive effect scope.`);
-    }
-  }
-  /**
-   * This should only be called on non-detached scopes
-   * @internal
-   */
-  on() {
-    if (++this._on === 1) {
-      this.prevScope = activeEffectScope;
-      activeEffectScope = this;
-    }
-  }
-  /**
-   * This should only be called on non-detached scopes
-   * @internal
-   */
-  off() {
-    if (this._on > 0 && --this._on === 0) {
-      activeEffectScope = this.prevScope;
-      this.prevScope = void 0;
-    }
-  }
-  stop(fromParent) {
-    if (this._active) {
-      this._active = false;
-      let i, l;
-      for (i = 0, l = this.effects.length; i < l; i++) {
-        this.effects[i].stop();
-      }
-      this.effects.length = 0;
-      for (i = 0, l = this.cleanups.length; i < l; i++) {
-        this.cleanups[i]();
+function getSequence(arr) {
+  const p = arr.slice();
+  const result = [0];
+  let i, j, u, v, c;
+  const len = arr.length;
+  for (i = 0; i < len; i++) {
+    const arrI = arr[i];
+    if (arrI !== 0) {
+      j = result[result.length - 1];
+      if (arr[j] < arrI) {
+        p[i] = j;
+        result.push(i);
+        continue;
       }
-      this.cleanups.length = 0;
-      if (this.scopes) {
-        for (i = 0, l = this.scopes.length; i < l; i++) {
-          this.scopes[i].stop(true);
+      u = 0;
+      v = result.length - 1;
+      while (u < v) {
+        c = u + v >> 1;
+        if (arr[result[c]] < arrI) {
+          u = c + 1;
+        } else {
+          v = c;
         }
-        this.scopes.length = 0;
       }
-      if (!this.detached && this.parent && !fromParent) {
-        const last = this.parent.scopes.pop();
-        if (last && last !== this) {
-          this.parent.scopes[this.index] = last;
-          last.index = this.index;
+      if (arrI < arr[result[u]]) {
+        if (u > 0) {
+          p[i] = result[u - 1];
         }
+        result[u] = i;
       }
-      this.parent = void 0;
     }
   }
-}
-function effectScope(detached) {
-  return new EffectScope(detached);
-}
-function getCurrentScope() {
-  return activeEffectScope;
-}
-function onScopeDispose(fn, failSilently = false) {
-  if (activeEffectScope) {
-    activeEffectScope.cleanups.push(fn);
-  } else if (!failSilently) {
-    warn$2(
-      `onScopeDispose() is called when there is no active effect scope to be associated with.`
-    );
+  u = result.length;
+  v = result[u - 1];
+  while (u-- > 0) {
+    result[u] = v;
+    v = p[v];
   }
+  return result;
 }
 
-let activeSub;
-const pausedQueueEffects = /* @__PURE__ */ new WeakSet();
-class ReactiveEffect {
-  constructor(fn) {
-    this.fn = fn;
-    /**
-     * @internal
-     */
-    this.deps = void 0;
-    /**
-     * @internal
-     */
-    this.depsTail = void 0;
-    /**
-     * @internal
-     */
-    this.flags = 1 | 4;
-    /**
-     * @internal
-     */
-    this.next = void 0;
-    /**
-     * @internal
-     */
-    this.cleanup = void 0;
-    this.scheduler = void 0;
-    if (activeEffectScope && activeEffectScope.active) {
-      activeEffectScope.effects.push(this);
-    }
-  }
-  pause() {
-    this.flags |= 64;
-  }
-  resume() {
-    if (this.flags & 64) {
-      this.flags &= -65;
-      if (pausedQueueEffects.has(this)) {
-        pausedQueueEffects.delete(this);
-        this.trigger();
-      }
-    }
-  }
-  /**
-   * @internal
-   */
-  notify() {
-    if (this.flags & 2 && !(this.flags & 32)) {
-      return;
-    }
-    if (!(this.flags & 8)) {
-      batch(this);
-    }
-  }
-  run() {
-    if (!(this.flags & 1)) {
-      return this.fn();
-    }
-    this.flags |= 2;
-    cleanupEffect(this);
-    prepareDeps(this);
-    const prevEffect = activeSub;
-    const prevShouldTrack = shouldTrack;
-    activeSub = this;
-    shouldTrack = true;
-    try {
-      return this.fn();
-    } finally {
-      if (activeSub !== this) {
-        warn$2(
-          "Active effect was not restored correctly - this is likely a Vue internal bug."
-        );
-      }
-      cleanupDeps(this);
-      activeSub = prevEffect;
-      shouldTrack = prevShouldTrack;
-      this.flags &= -3;
-    }
+function normalizeCssVarValue(value) {
+  if (value == null) {
+    return "initial";
   }
-  stop() {
-    if (this.flags & 1) {
-      for (let link = this.deps; link; link = link.nextDep) {
-        removeSub(link);
-      }
-      this.deps = this.depsTail = void 0;
-      cleanupEffect(this);
-      this.onStop && this.onStop();
-      this.flags &= -2;
-    }
+  if (typeof value === "string") {
+    return value === "" ? " " : value;
   }
-  trigger() {
-    if (this.flags & 64) {
-      pausedQueueEffects.add(this);
-    } else if (this.scheduler) {
-      this.scheduler();
-    } else {
-      this.runIfDirty();
-    }
-  }
-  /**
-   * @internal
-   */
-  runIfDirty() {
-    if (isDirty(this)) {
-      this.run();
+  if (typeof value !== "number" || !Number.isFinite(value)) {
+    {
+      console.warn(
+        "[Vue warn] Invalid value used for CSS binding. Expected a string or a finite number but received:",
+        value
+      );
     }
   }
-  get dirty() {
-    return isDirty(this);
-  }
+  return String(value);
 }
+
+function warn$2(msg, ...args) {
+  console.warn(`[Vue warn] ${msg}`, ...args);
+}
+
+var ReactiveFlags = /* @__PURE__ */ ((ReactiveFlags2) => {
+  ReactiveFlags2[ReactiveFlags2["None"] = 0] = "None";
+  ReactiveFlags2[ReactiveFlags2["Mutable"] = 1] = "Mutable";
+  ReactiveFlags2[ReactiveFlags2["Watching"] = 2] = "Watching";
+  ReactiveFlags2[ReactiveFlags2["RecursedCheck"] = 4] = "RecursedCheck";
+  ReactiveFlags2[ReactiveFlags2["Recursed"] = 8] = "Recursed";
+  ReactiveFlags2[ReactiveFlags2["Dirty"] = 16] = "Dirty";
+  ReactiveFlags2[ReactiveFlags2["Pending"] = 32] = "Pending";
+  return ReactiveFlags2;
+})(ReactiveFlags || {});
+const notifyBuffer = [];
 let batchDepth = 0;
-let batchedSub;
-let batchedComputed;
-function batch(sub, isComputed = false) {
-  sub.flags |= 8;
-  if (isComputed) {
-    sub.next = batchedComputed;
-    batchedComputed = sub;
-    return;
+let activeSub = void 0;
+let notifyIndex = 0;
+let notifyBufferLength = 0;
+function setActiveSub(sub) {
+  try {
+    return activeSub;
+  } finally {
+    activeSub = sub;
   }
-  sub.next = batchedSub;
-  batchedSub = sub;
 }
 function startBatch() {
-  batchDepth++;
+  ++batchDepth;
 }
 function endBatch() {
-  if (--batchDepth > 0) {
-    return;
-  }
-  if (batchedComputed) {
-    let e = batchedComputed;
-    batchedComputed = void 0;
-    while (e) {
-      const next = e.next;
-      e.next = void 0;
-      e.flags &= -9;
-      e = next;
-    }
-  }
-  let error;
-  while (batchedSub) {
-    let e = batchedSub;
-    batchedSub = void 0;
-    while (e) {
-      const next = e.next;
-      e.next = void 0;
-      e.flags &= -9;
-      if (e.flags & 1) {
-        try {
-          ;
-          e.trigger();
-        } catch (err) {
-          if (!error) error = err;
-        }
-      }
-      e = next;
-    }
+  if (!--batchDepth && notifyBufferLength) {
+    flush();
   }
-  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;
-  }
-}
-function cleanupDeps(sub) {
-  let head;
-  let tail = sub.depsTail;
-  let link = tail;
-  while (link) {
-    const prev = link.prevDep;
-    if (link.version === -1) {
-      if (link === tail) tail = prev;
-      removeSub(link);
-      removeDep(link);
-    } else {
-      head = link;
-    }
-    link.dep.activeLink = link.prevActiveLink;
-    link.prevActiveLink = void 0;
-    link = prev;
+function link(dep, sub) {
+  const prevDep = sub.depsTail;
+  if (prevDep !== void 0 && prevDep.dep === dep) {
+    return;
   }
-  sub.deps = head;
-  sub.depsTail = tail;
-}
-function isDirty(sub) {
-  for (let link = sub.deps; link; link = link.nextDep) {
-    if (link.dep.version !== link.version || link.dep.computed && (refreshComputed(link.dep.computed) || link.dep.version !== link.version)) {
-      return true;
+  let nextDep = void 0;
+  const recursedCheck = sub.flags & 4 /* RecursedCheck */;
+  if (recursedCheck) {
+    nextDep = prevDep !== void 0 ? prevDep.nextDep : sub.deps;
+    if (nextDep !== void 0 && nextDep.dep === dep) {
+      sub.depsTail = nextDep;
+      return;
     }
   }
-  if (sub._dirty) {
-    return true;
-  }
-  return false;
-}
-function refreshComputed(computed) {
-  if (computed.flags & 4 && !(computed.flags & 16)) {
+  const prevSub = dep.subsTail;
+  if (prevSub !== void 0 && prevSub.sub === sub && (!recursedCheck || isValidLink(prevSub, sub))) {
     return;
   }
-  computed.flags &= -17;
-  if (computed.globalVersion === globalVersion) {
-    return;
+  const newLink = sub.depsTail = dep.subsTail = {
+    dep,
+    sub,
+    prevDep,
+    nextDep,
+    prevSub,
+    nextSub: void 0
+  };
+  if (nextDep !== void 0) {
+    nextDep.prevDep = newLink;
   }
-  computed.globalVersion = globalVersion;
-  if (!computed.isSSR && computed.flags & 128 && (!computed.deps && !computed._dirty || !isDirty(computed))) {
-    return;
+  if (prevDep !== void 0) {
+    prevDep.nextDep = newLink;
+  } else {
+    sub.deps = newLink;
   }
-  computed.flags |= 2;
-  const dep = computed.dep;
-  const prevSub = activeSub;
-  const prevShouldTrack = shouldTrack;
-  activeSub = computed;
-  shouldTrack = true;
-  try {
-    prepareDeps(computed);
-    const value = computed.fn(computed._value);
-    if (dep.version === 0 || hasChanged(value, computed._value)) {
-      computed.flags |= 128;
-      computed._value = value;
-      dep.version++;
-    }
-  } catch (err) {
-    dep.version++;
-    throw err;
-  } finally {
-    activeSub = prevSub;
-    shouldTrack = prevShouldTrack;
-    cleanupDeps(computed);
-    computed.flags &= -3;
+  if (prevSub !== void 0) {
+    prevSub.nextSub = newLink;
+  } else {
+    dep.subs = newLink;
   }
 }
-function removeSub(link, soft = false) {
-  const { dep, prevSub, nextSub } = link;
-  if (prevSub) {
-    prevSub.nextSub = nextSub;
-    link.prevSub = void 0;
+function unlink(link2, sub = link2.sub) {
+  const dep = link2.dep;
+  const prevDep = link2.prevDep;
+  const nextDep = link2.nextDep;
+  const nextSub = link2.nextSub;
+  const prevSub = link2.prevSub;
+  if (nextDep !== void 0) {
+    nextDep.prevDep = prevDep;
+  } else {
+    sub.depsTail = prevDep;
   }
-  if (nextSub) {
-    nextSub.prevSub = prevSub;
-    link.nextSub = void 0;
+  if (prevDep !== void 0) {
+    prevDep.nextDep = nextDep;
+  } else {
+    sub.deps = nextDep;
   }
-  if (dep.subsHead === link) {
-    dep.subsHead = nextSub;
+  if (nextSub !== void 0) {
+    nextSub.prevSub = prevSub;
+  } else {
+    dep.subsTail = prevSub;
   }
-  if (dep.subs === link) {
-    dep.subs = prevSub;
-    if (!prevSub && dep.computed) {
-      dep.computed.flags &= -5;
-      for (let l = dep.computed.deps; l; l = l.nextDep) {
-        removeSub(l, true);
+  if (prevSub !== void 0) {
+    prevSub.nextSub = nextSub;
+  } else if ((dep.subs = nextSub) === void 0) {
+    let toRemove = dep.deps;
+    if (toRemove !== void 0) {
+      do {
+        toRemove = unlink(toRemove, dep);
+      } while (toRemove !== void 0);
+      dep.flags |= 16 /* Dirty */;
+    }
+  }
+  return nextDep;
+}
+function propagate(link2) {
+  let next = link2.nextSub;
+  let stack;
+  top: do {
+    const sub = link2.sub;
+    let flags = sub.flags;
+    if (flags & (1 /* Mutable */ | 2 /* Watching */)) {
+      if (!(flags & (4 /* RecursedCheck */ | 8 /* Recursed */ | 16 /* Dirty */ | 32 /* Pending */))) {
+        sub.flags = flags | 32 /* Pending */;
+      } else if (!(flags & (4 /* RecursedCheck */ | 8 /* Recursed */))) {
+        flags = 0 /* None */;
+      } else if (!(flags & 4 /* RecursedCheck */)) {
+        sub.flags = flags & -9 /* Recursed */ | 32 /* Pending */;
+      } else if (!(flags & (16 /* Dirty */ | 32 /* Pending */)) && isValidLink(link2, sub)) {
+        sub.flags = flags | 8 /* Recursed */ | 32 /* Pending */;
+        flags &= 1 /* Mutable */;
+      } else {
+        flags = 0 /* None */;
+      }
+      if (flags & 2 /* Watching */) {
+        notifyBuffer[notifyBufferLength++] = sub;
+      }
+      if (flags & 1 /* Mutable */) {
+        const subSubs = sub.subs;
+        if (subSubs !== void 0) {
+          link2 = subSubs;
+          if (subSubs.nextSub !== void 0) {
+            stack = { value: next, prev: stack };
+            next = link2.nextSub;
+          }
+          continue;
+        }
       }
     }
-  }
-  if (!soft && !--dep.sc && dep.map) {
-    dep.map.delete(dep.key);
-  }
+    if ((link2 = next) !== void 0) {
+      next = link2.nextSub;
+      continue;
+    }
+    while (stack !== void 0) {
+      link2 = stack.value;
+      stack = stack.prev;
+      if (link2 !== void 0) {
+        next = link2.nextSub;
+        continue top;
+      }
+    }
+    break;
+  } while (true);
 }
-function removeDep(link) {
-  const { prevDep, nextDep } = link;
-  if (prevDep) {
-    prevDep.nextDep = nextDep;
-    link.prevDep = void 0;
+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."
+    );
   }
-  if (nextDep) {
-    nextDep.prevDep = prevDep;
-    link.nextDep = void 0;
+  activeSub = prevSub;
+  const depsTail = sub.depsTail;
+  let toRemove = depsTail !== void 0 ? depsTail.nextDep : sub.deps;
+  while (toRemove !== void 0) {
+    toRemove = unlink(toRemove, sub);
+  }
+  sub.flags &= -5 /* RecursedCheck */;
+}
+function flush() {
+  while (notifyIndex < notifyBufferLength) {
+    const effect = notifyBuffer[notifyIndex];
+    notifyBuffer[notifyIndex++] = void 0;
+    effect.notify();
+  }
+  notifyIndex = 0;
+  notifyBufferLength = 0;
+}
+function checkDirty(link2, sub) {
+  let stack;
+  let checkDepth = 0;
+  top: do {
+    const dep = link2.dep;
+    const depFlags = dep.flags;
+    let dirty = false;
+    if (sub.flags & 16 /* Dirty */) {
+      dirty = true;
+    } else if ((depFlags & (1 /* Mutable */ | 16 /* Dirty */)) === (1 /* Mutable */ | 16 /* Dirty */)) {
+      if (dep.update()) {
+        const subs = dep.subs;
+        if (subs.nextSub !== void 0) {
+          shallowPropagate(subs);
+        }
+        dirty = true;
+      }
+    } else if ((depFlags & (1 /* Mutable */ | 32 /* Pending */)) === (1 /* Mutable */ | 32 /* Pending */)) {
+      if (link2.nextSub !== void 0 || link2.prevSub !== void 0) {
+        stack = { value: link2, prev: stack };
+      }
+      link2 = dep.deps;
+      sub = dep;
+      ++checkDepth;
+      continue;
+    }
+    if (!dirty && link2.nextDep !== void 0) {
+      link2 = link2.nextDep;
+      continue;
+    }
+    while (checkDepth) {
+      --checkDepth;
+      const firstSub = sub.subs;
+      const hasMultipleSubs = firstSub.nextSub !== void 0;
+      if (hasMultipleSubs) {
+        link2 = stack.value;
+        stack = stack.prev;
+      } else {
+        link2 = firstSub;
+      }
+      if (dirty) {
+        if (sub.update()) {
+          if (hasMultipleSubs) {
+            shallowPropagate(firstSub);
+          }
+          sub = link2.sub;
+          continue;
+        }
+      } else {
+        sub.flags &= -33 /* Pending */;
+      }
+      sub = link2.sub;
+      if (link2.nextDep !== void 0) {
+        link2 = link2.nextDep;
+        continue top;
+      }
+      dirty = false;
+    }
+    return dirty;
+  } while (true);
+}
+function shallowPropagate(link2) {
+  do {
+    const sub = link2.sub;
+    const nextSub = link2.nextSub;
+    const subFlags = sub.flags;
+    if ((subFlags & (32 /* Pending */ | 16 /* Dirty */)) === 32 /* Pending */) {
+      sub.flags = subFlags | 16 /* Dirty */;
+    }
+    link2 = nextSub;
+  } while (link2 !== void 0);
+}
+function isValidLink(checkLink, sub) {
+  const depsTail = sub.depsTail;
+  if (depsTail !== void 0) {
+    let link2 = sub.deps;
+    do {
+      if (link2 === checkLink) {
+        return true;
+      }
+      if (link2 === depsTail) {
+        break;
+      }
+      link2 = link2.nextDep;
+    } while (link2 !== void 0);
   }
+  return false;
 }
-function effect(fn, options) {
-  if (fn.effect instanceof ReactiveEffect) {
-    fn = fn.effect.fn;
-  }
-  const e = new ReactiveEffect(fn);
-  if (options) {
-    extend(e, options);
+
+const triggerEventInfos = [];
+function onTrack(sub, debugInfo) {
+  if (sub.onTrack) {
+    sub.onTrack(
+      extend(
+        {
+          effect: sub
+        },
+        debugInfo
+      )
+    );
   }
-  try {
-    e.run();
-  } catch (err) {
-    e.stop();
-    throw err;
+}
+function onTrigger(sub) {
+  if (sub.onTrigger) {
+    const debugInfo = triggerEventInfos[triggerEventInfos.length - 1];
+    sub.onTrigger(
+      extend(
+        {
+          effect: sub
+        },
+        debugInfo
+      )
+    );
   }
-  const runner = e.run.bind(e);
-  runner.effect = e;
-  return runner;
 }
-function stop(runner) {
-  runner.effect.stop();
+function setupOnTrigger(target) {
+  Object.defineProperty(target.prototype, "onTrigger", {
+    get() {
+      return this._onTrigger;
+    },
+    set(val) {
+      if (val && !this._onTrigger) setupFlagsHandler(this);
+      this._onTrigger = val;
+    }
+  });
 }
-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;
+function setupFlagsHandler(target) {
+  target._flags = target.flags;
+  Object.defineProperty(target, "flags", {
+    get() {
+      return target._flags;
+    },
+    set(value) {
+      if (!(target._flags & (ReactiveFlags.Dirty | ReactiveFlags.Pending)) && !!(value & (ReactiveFlags.Dirty | ReactiveFlags.Pending))) {
+        onTrigger(this);
+      }
+      target._flags = value;
     }
-  }
+  });
 }
 
-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;
-    }
+  constructor(map, key) {
+    this.map = map;
+    this.key = key;
+    this._subs = void 0;
+    this.subsTail = void 0;
+    this.flags = ReactiveFlags.None;
   }
-  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);
+  get subs() {
+    return this._subs;
   }
-  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;
+  set subs(value) {
+    this._subs = value;
+    if (value === void 0) {
+      this.map.delete(this.key);
     }
-    if (link.dep.subsHead === void 0) {
-      link.dep.subsHead = link;
-    }
-    link.dep.subs = link;
   }
 }
 const targetMap = /* @__PURE__ */ new WeakMap();
@@ -922,36 +762,34 @@ const ARRAY_ITERATE_KEY = Symbol(
   "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,
@@ -960,6 +798,11 @@ function trigger(target, type, key, newValue, oldValue, oldTarget) {
           oldTarget
         });
       }
+      propagate(dep.subs);
+      shallowPropagate(dep.subs);
+      {
+        triggerEventInfos.pop();
+      }
     }
   };
   startBatch();
@@ -1184,11 +1027,11 @@ function searchProxy(self, method, args) {
   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;
 }
 
@@ -1234,14 +1077,18 @@ class BaseReactiveHandler {
         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;
     }
@@ -1693,33 +1540,47 @@ function isRef(r) {
   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;
   }
@@ -1728,30 +1589,55 @@ class RefImpl {
     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) {
@@ -1777,13 +1663,21 @@ function proxyRefs(objectWithRefs) {
 }
 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();
   }
@@ -1795,9 +1689,6 @@ function customRef(factory) {
   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);
@@ -1850,69 +1741,333 @@ function propertyToRef(source, key, defaultValue) {
   return isRef(val) ? val : new ObjectRefImpl(source, key, defaultValue);
 }
 
-class ComputedRefImpl {
-  constructor(fn, setter, isSSR) {
-    this.fn = fn;
-    this.setter = setter;
-    /**
-     * @internal
-     */
-    this._value = void 0;
-    /**
-     * @internal
-     */
-    this.dep = new Dep(this);
+class ReactiveEffect {
+  constructor(fn) {
+    this.deps = void 0;
+    this.depsTail = void 0;
+    this.subs = void 0;
+    this.subsTail = void 0;
+    this.flags = ReactiveFlags.Watching | ReactiveFlags.Dirty;
     /**
      * @internal
      */
-    this.__v_isRef = true;
-    // TODO isolatedDeclarations "__v_isReadonly"
-    // A computed is also a subscriber that tracks other deps
+    this.cleanups = [];
     /**
      * @internal
      */
+    this.cleanupsLength = 0;
+    if (fn !== void 0) {
+      this.fn = fn;
+    }
+    if (activeEffectScope) {
+      link(this, activeEffectScope);
+    }
+  }
+  // @ts-expect-error
+  fn() {
+  }
+  get active() {
+    return !(this.flags & 1024);
+  }
+  pause() {
+    this.flags |= 256;
+  }
+  resume() {
+    const flags = this.flags &= -257;
+    if (flags & (ReactiveFlags.Dirty | ReactiveFlags.Pending)) {
+      this.notify();
+    }
+  }
+  notify() {
+    if (!(this.flags & 256) && this.dirty) {
+      this.run();
+    }
+  }
+  run() {
+    if (!this.active) {
+      return this.fn();
+    }
+    cleanup(this);
+    const prevSub = startTracking(this);
+    try {
+      return this.fn();
+    } finally {
+      endTracking(this, prevSub);
+      const flags = this.flags;
+      if ((flags & (ReactiveFlags.Recursed | 128)) === (ReactiveFlags.Recursed | 128)) {
+        this.flags = flags & ~ReactiveFlags.Recursed;
+        this.notify();
+      }
+    }
+  }
+  stop() {
+    if (!this.active) {
+      return;
+    }
+    this.flags = 1024;
+    let dep = this.deps;
+    while (dep !== void 0) {
+      dep = unlink(dep, this);
+    }
+    const sub = this.subs;
+    if (sub !== void 0) {
+      unlink(sub);
+    }
+    cleanup(this);
+  }
+  get dirty() {
+    const flags = this.flags;
+    if (flags & ReactiveFlags.Dirty) {
+      return true;
+    }
+    if (flags & ReactiveFlags.Pending) {
+      if (checkDirty(this.deps, this)) {
+        this.flags = flags | ReactiveFlags.Dirty;
+        return true;
+      } else {
+        this.flags = flags & ~ReactiveFlags.Pending;
+      }
+    }
+    return false;
+  }
+}
+{
+  setupOnTrigger(ReactiveEffect);
+}
+function effect(fn, options) {
+  if (fn.effect instanceof ReactiveEffect) {
+    fn = fn.effect.fn;
+  }
+  const e = new ReactiveEffect(fn);
+  if (options) {
+    const { onStop, scheduler } = options;
+    if (onStop) {
+      options.onStop = void 0;
+      const stop2 = e.stop.bind(e);
+      e.stop = () => {
+        stop2();
+        onStop();
+      };
+    }
+    if (scheduler) {
+      options.scheduler = void 0;
+      e.notify = () => {
+        if (!(e.flags & 256)) {
+          scheduler();
+        }
+      };
+    }
+    extend(e, options);
+  }
+  try {
+    e.run();
+  } catch (err) {
+    e.stop();
+    throw err;
+  }
+  const runner = e.run.bind(e);
+  runner.effect = e;
+  return runner;
+}
+function stop(runner) {
+  runner.effect.stop();
+}
+function cleanup(sub) {
+  const l = sub.cleanupsLength;
+  if (l) {
+    for (let i = 0; i < l; i++) {
+      sub.cleanups[i]();
+    }
+    sub.cleanupsLength = 0;
+  }
+}
+
+let activeEffectScope;
+class EffectScope {
+  constructor(detached = false) {
     this.deps = void 0;
+    this.depsTail = void 0;
+    this.subs = void 0;
+    this.subsTail = void 0;
+    this.flags = 0;
     /**
      * @internal
      */
-    this.depsTail = void 0;
+    this.cleanups = [];
     /**
      * @internal
      */
-    this.flags = 16;
+    this.cleanupsLength = 0;
+    if (!detached && activeEffectScope) {
+      link(this, activeEffectScope);
+    }
+  }
+  get active() {
+    return !(this.flags & 1024);
+  }
+  pause() {
+    if (!(this.flags & 256)) {
+      this.flags |= 256;
+      for (let link2 = this.deps; link2 !== void 0; link2 = link2.nextDep) {
+        const dep = link2.dep;
+        if ("pause" in dep) {
+          dep.pause();
+        }
+      }
+    }
+  }
+  /**
+   * Resumes the effect scope, including all child scopes and effects.
+   */
+  resume() {
+    const flags = this.flags;
+    if (flags & 256) {
+      this.flags = flags & -257;
+      for (let link2 = this.deps; link2 !== void 0; link2 = link2.nextDep) {
+        const dep = link2.dep;
+        if ("resume" in dep) {
+          dep.resume();
+        }
+      }
+    }
+  }
+  run(fn) {
+    const prevSub = setActiveSub();
+    const prevScope = activeEffectScope;
+    try {
+      activeEffectScope = this;
+      return fn();
+    } finally {
+      activeEffectScope = prevScope;
+      setActiveSub(prevSub);
+    }
+  }
+  stop() {
+    if (!this.active) {
+      return;
+    }
+    this.flags = 1024;
+    let dep = this.deps;
+    while (dep !== void 0) {
+      const node = dep.dep;
+      if ("stop" in node) {
+        dep = dep.nextDep;
+        node.stop();
+      } else {
+        dep = unlink(dep, this);
+      }
+    }
+    const sub = this.subs;
+    if (sub !== void 0) {
+      unlink(sub);
+    }
+    cleanup(this);
+  }
+}
+function effectScope(detached) {
+  return new EffectScope(detached);
+}
+function getCurrentScope() {
+  return activeEffectScope;
+}
+function setCurrentScope(scope) {
+  try {
+    return activeEffectScope;
+  } finally {
+    activeEffectScope = scope;
+  }
+}
+function onScopeDispose(fn, failSilently = false) {
+  if (activeEffectScope !== void 0) {
+    activeEffectScope.cleanups[activeEffectScope.cleanupsLength++] = fn;
+  } else if (!failSilently) {
+    warn$2(
+      `onScopeDispose() is called when there is no active effect scope to be associated with.`
+    );
+  }
+}
+
+class ComputedRefImpl {
+  constructor(fn, setter) {
+    this.fn = fn;
+    this.setter = setter;
     /**
      * @internal
      */
-    this.globalVersion = globalVersion - 1;
+    this._value = void 0;
+    this.subs = void 0;
+    this.subsTail = void 0;
+    this.deps = void 0;
+    this.depsTail = void 0;
+    this.flags = ReactiveFlags.Mutable | ReactiveFlags.Dirty;
     /**
      * @internal
      */
-    this.next = void 0;
-    // for backwards compat
-    this.effect = this;
+    this.__v_isRef = true;
     this["__v_isReadonly"] = !setter;
-    this.isSSR = isSSR;
+  }
+  // TODO isolatedDeclarations "__v_isReadonly"
+  // for backwards compat
+  get effect() {
+    return this;
+  }
+  // for backwards compat
+  get dep() {
+    return this;
   }
   /**
    * @internal
+   * for backwards compat
    */
-  notify() {
-    this.flags |= 16;
-    if (!(this.flags & 8) && // avoid infinite self recursion
-    activeSub !== this) {
-      batch(this, true);
+  get _dirty() {
+    const flags = this.flags;
+    if (flags & ReactiveFlags.Dirty) {
       return true;
     }
+    if (flags & ReactiveFlags.Pending) {
+      if (checkDirty(this.deps, this)) {
+        this.flags = flags | ReactiveFlags.Dirty;
+        return true;
+      } else {
+        this.flags = flags & ~ReactiveFlags.Pending;
+      }
+    }
+    return false;
+  }
+  /**
+   * @internal
+   * for backwards compat
+   */
+  set _dirty(v) {
+    if (v) {
+      this.flags |= ReactiveFlags.Dirty;
+    } else {
+      this.flags &= ~(ReactiveFlags.Dirty | ReactiveFlags.Pending);
+    }
   }
   get value() {
-    const link = this.dep.track({
-      target: this,
-      type: "get",
-      key: "value"
-    }) ;
-    refreshComputed(this);
-    if (link) {
-      link.version = this.dep.version;
+    const flags = this.flags;
+    if (flags & ReactiveFlags.Dirty || flags & ReactiveFlags.Pending && checkDirty(this.deps, this)) {
+      if (this.update()) {
+        const subs = this.subs;
+        if (subs !== void 0) {
+          shallowPropagate(subs);
+        }
+      }
+    } else if (flags & ReactiveFlags.Pending) {
+      this.flags = flags & ~ReactiveFlags.Pending;
+    }
+    if (activeSub !== void 0) {
+      {
+        onTrack(activeSub, {
+          target: this,
+          type: "get",
+          key: "value"
+        });
+      }
+      link(this, activeSub);
+    } else if (activeEffectScope !== void 0) {
+      link(this, activeEffectScope);
     }
     return this._value;
   }
@@ -1923,6 +2078,23 @@ class ComputedRefImpl {
       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;
@@ -1933,7 +2105,7 @@ function computed$1(getterOrOptions, debugOptions, isSSR = false) {
     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;
@@ -1954,177 +2126,146 @@ const TriggerOpTypes = {
 };
 
 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();
+    const { immediate, deep, call } = this.options;
+    if (initialRun && !immediate) {
+      return;
     }
-  };
-  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();
+    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;
       }
-      cleanupMap.delete(effect);
-    }
-  };
-  {
-    effect.onTrack = options.onTrack;
-    effect.onTrigger = options.onTrigger;
-  }
-  if (cb) {
-    if (immediate) {
-      job(true);
-    } else {
-      oldValue = effect.run();
     }
-  } 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"]) {
@@ -2160,8 +2301,8 @@ function traverse(value, depth = Infinity, seen) {
 }
 
 const stack = [];
-function pushWarningContext(vnode) {
-  stack.push(vnode);
+function pushWarningContext(ctx) {
+  stack.push(ctx);
 }
 function popWarningContext() {
   stack.pop();
@@ -2170,8 +2311,9 @@ let isWarning = false;
 function warn$1(msg, ...args) {
   if (isWarning) return;
   isWarning = true;
-  pauseTracking();
-  const instance = stack.length ? stack[stack.length - 1].component : null;
+  const prevSub = setActiveSub();
+  const entry = stack.length ? stack[stack.length - 1] : null;
+  const instance = isVNode(entry) ? entry.component : entry;
   const appWarnHandler = instance && instance.appContext.config.warnHandler;
   const trace = getComponentTrace();
   if (appWarnHandler) {
@@ -2185,9 +2327,9 @@ function warn$1(msg, ...args) {
           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
       ]
@@ -2201,27 +2343,31 @@ function warn$1(msg, ...args) {
     }
     console.warn(...warnArgs);
   }
-  resetTracking();
+  setActiveSub(prevSub);
   isWarning = false;
 }
 function getComponentTrace() {
-  let currentVNode = stack[stack.length - 1];
-  if (!currentVNode) {
+  let currentCtx = stack[stack.length - 1];
+  if (!currentCtx) {
     return [];
   }
   const normalizedStack = [];
-  while (currentVNode) {
+  while (currentCtx) {
     const last = normalizedStack[0];
-    if (last && last.vnode === currentVNode) {
+    if (last && last.ctx === currentCtx) {
       last.recurseCount++;
     } else {
       normalizedStack.push({
-        vnode: currentVNode,
+        ctx: currentCtx,
         recurseCount: 0
       });
     }
-    const parentInstance = currentVNode.component && currentVNode.component.parent;
-    currentVNode = parentInstance && parentInstance.vnode;
+    if (isVNode(currentCtx)) {
+      const parent = currentCtx.component && currentCtx.component.parent;
+      currentCtx = parent && parent.vnode || parent;
+    } else {
+      currentCtx = currentCtx.parent;
+    }
   }
   return normalizedStack;
 }
@@ -2233,16 +2379,13 @@ function formatTrace(trace) {
   });
   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 = [];
@@ -2374,11 +2517,10 @@ function callWithAsyncErrorHandling(fn, instance, type, args) {
   }
 }
 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;
@@ -2392,26 +2534,26 @@ function handleError(err, instance, type, throwInDev = true) {
       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) {
@@ -2422,26 +2564,23 @@ function logError(err, type, contextVNode, throwInDev = true, throwInProd = fals
   }
 }
 
-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;
@@ -2449,130 +2588,168 @@ function findInsertionIndex(id) {
   }
   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);
     }
   }
@@ -2639,10 +2816,17 @@ function rerender(id, newRender) {
       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) {
@@ -2651,42 +2835,54 @@ function reload(id, newComp) {
   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(() => {
@@ -2899,14 +3095,14 @@ function invokeDirectiveHook(vnode, prevVNode, instance, name) {
     }
     let hook = binding.dir[name];
     if (hook) {
-      pauseTracking();
+      const prevSub = setActiveSub();
       callWithAsyncErrorHandling(hook, instance, 8, [
         vnode.el,
         binding,
         vnode,
         prevVNode
       ]);
-      resetTracking();
+      setActiveSub(prevSub);
     }
   }
 }
@@ -3006,29 +3202,37 @@ const TeleportImpl = {
       }
       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;
@@ -3075,6 +3279,7 @@ const TeleportImpl = {
             container,
             mainAnchor,
             internals,
+            parentComponent,
             1
           );
         } else {
@@ -3094,6 +3299,7 @@ const TeleportImpl = {
               nextTarget,
               null,
               internals,
+              parentComponent,
               0
             );
           } else {
@@ -3109,6 +3315,7 @@ const TeleportImpl = {
             target,
             targetAnchor,
             internals,
+            parentComponent,
             1
           );
         }
@@ -3148,7 +3355,7 @@ const TeleportImpl = {
   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);
   }
@@ -3164,7 +3371,8 @@ function moveTeleport(vnode, container, parentAnchor, { o: { insert }, m: move }
           children[i],
           container,
           parentAnchor,
-          2
+          2,
+          parentComponent
         );
       }
     }
@@ -3349,7 +3557,7 @@ const BaseTransitionImpl = {
           state.isLeaving = true;
           leavingHooks.afterLeave = () => {
             state.isLeaving = false;
-            if (!(instance.job.flags & 8)) {
+            if (!(instance.job.flags & 4)) {
               instance.update();
             }
             delete leavingHooks.afterLeave;
@@ -3628,7 +3836,7 @@ function defineComponent(options, extraOptions) {
 }
 
 function useId() {
-  const i = getCurrentInstance();
+  const i = getCurrentGenericInstance();
   if (i) {
     return (i.appContext.config.idPrefix || "v") + "-" + i.ids[0] + i.ids[1]++;
   } else {
@@ -3644,7 +3852,7 @@ function markAsyncBoundary(instance) {
 
 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;
@@ -3764,8 +3972,7 @@ function setRef(rawRef, oldRawRef, parentSuspense, vnode, isUnmount = false) {
         }
       };
       if (value) {
-        doSet.id = -1;
-        queuePostRenderEffect(doSet, parentSuspense);
+        queuePostRenderEffect(doSet, -1, parentSuspense);
       } else {
         doSet();
       }
@@ -3933,6 +4140,9 @@ function createHydrationFunctions(rendererInternals) {
             );
           }
         } 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) {
@@ -4094,11 +4304,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;
@@ -4378,14 +4592,16 @@ function resolveCssVars(instance, vnode, expectedMap) {
   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";
@@ -4644,7 +4860,7 @@ function defineAsyncComponent(source) {
       }
       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) => {
@@ -4687,8 +4903,8 @@ const KeepAliveImpl = {
     max: [String, Number]
   },
   setup(props, { slots }) {
-    const instance = getCurrentInstance();
-    const sharedContext = instance.ctx;
+    const keepAliveInstance = getCurrentInstance();
+    const sharedContext = keepAliveInstance.ctx;
     if (!sharedContext.renderer) {
       return () => {
         const children = slots.default && slots.default();
@@ -4699,9 +4915,9 @@ const KeepAliveImpl = {
     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,
@@ -4712,58 +4928,80 @@ const KeepAliveImpl = {
     } = 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) => {
@@ -4795,12 +5033,19 @@ const KeepAliveImpl = {
     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));
         }
       }
     };
@@ -4808,12 +5053,12 @@ const KeepAliveImpl = {
     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);
@@ -4899,7 +5144,7 @@ function onActivated(hook, target) {
 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) {
@@ -4913,7 +5158,7 @@ function registerKeepAliveHook(hook, type, target = currentInstance) {
   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);
       }
@@ -4945,12 +5190,14 @@ function injectHook(type, hook, target = currentInstance, prepend = false) {
   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);
@@ -5021,7 +5268,11 @@ function resolveAsset(type, name, warnMissing = true, maybeSelfReference = false
     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) {
@@ -5115,7 +5366,13 @@ function createSlots(slots, dynamicSlots) {
 }
 
 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,
@@ -5124,7 +5381,6 @@ function renderSlot(slots, name, props = {}, fallback, noSlotted) {
       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.`
@@ -5179,8 +5435,9 @@ function toHandlers(obj, preserveCaseIfNecessary) {
 }
 
 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 = (
@@ -5473,11 +5730,16 @@ function useAttrs() {
   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(
@@ -5525,14 +5787,14 @@ function createPropsRestProxy(props, excludedKeys) {
   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);
@@ -5979,7 +6241,7 @@ function createAppContext() {
   };
 }
 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);
@@ -6072,33 +6334,15 @@ function createAppAPI(render, hydrate) {
  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.
@@ -6121,7 +6365,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);
@@ -6162,6 +6406,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().`);
@@ -6176,9 +6421,9 @@ function provide(key, value) {
   }
 }
 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) {
@@ -6191,7 +6436,7 @@ function inject(key, defaultValue, treatDefaultAsFactory = false) {
   }
 }
 function hasInjectionContext() {
-  return !!(currentInstance || currentRenderingInstance || currentApp);
+  return !!(getCurrentGenericInstance() || currentApp);
 }
 
 const internalObjectProto = {};
@@ -6199,7 +6444,7 @@ const createInternalObject = () => Object.create(internalObjectProto);
 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);
@@ -6209,7 +6454,7 @@ function initProps(instance, rawProps, isStateful, isSSR = false) {
     }
   }
   {
-    validateProps(rawProps || {}, props, instance);
+    validateProps(rawProps || {}, props, instance.propsOptions[0]);
   }
   if (isStateful) {
     instance.props = isSSR ? props : shallowReactive(props);
@@ -6261,11 +6506,10 @@ function updateProps(instance, rawProps, rawPrevProps, optimized) {
             const camelizedKey = camelize(key);
             props[camelizedKey] = resolvePropValue(
               options,
-              rawCurrentProps,
               camelizedKey,
               value,
               instance,
-              false
+              baseResolveDefault
             );
           }
         } else {
@@ -6292,10 +6536,10 @@ function updateProps(instance, rawProps, rawPrevProps, optimized) {
           rawPrevProps[kebabKey] !== void 0)) {
             props[key] = resolvePropValue(
               options,
-              rawCurrentProps,
               key,
               void 0,
               instance,
+              baseResolveDefault,
               true
             );
           }
@@ -6317,7 +6561,7 @@ function updateProps(instance, rawProps, rawPrevProps, optimized) {
     trigger(instance.attrs, "set", "");
   }
   {
-    validateProps(rawProps || {}, props, instance);
+    validateProps(rawProps || {}, props, instance.propsOptions[0]);
   }
 }
 function setFullProps(instance, rawProps, props, attrs) {
@@ -6346,39 +6590,37 @@ function setFullProps(instance, rawProps, props, attrs) {
     }
   }
   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;
@@ -6397,6 +6639,17 @@ function resolvePropValue(options, props, key, value, instance, isAbsent) {
   }
   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;
@@ -6431,6 +6684,14 @@ function normalizePropsOptions(comp, appContext, asMixin = false) {
     }
     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])) {
@@ -6475,11 +6736,6 @@ function normalizePropsOptions(comp, appContext, asMixin = false) {
       }
     }
   }
-  const res = [normalized, needCastKeys];
-  if (isObject(comp)) {
-    cache.set(comp, res);
-  }
-  return res;
 }
 function validatePropName(key) {
   if (key[0] !== "$" && !isReservedProp(key)) {
@@ -6501,26 +6757,26 @@ function getType(ctor) {
   }
   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) {
@@ -6536,12 +6792,12 @@ function validateProp(name, value, prop, props, isAbsent) {
       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(
@@ -6612,7 +6868,7 @@ const normalizeSlot = (key, rawSlot, ctx) => {
     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.`
       );
@@ -6709,12 +6965,15 @@ const updateSlots = (instance, children, optimized) => {
 
 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) {
@@ -6731,7 +6990,7 @@ function endMeasure(instance, type) {
     perf.clearMarks(endTag);
   }
   {
-    devtoolsPerfEnd(instance, type, isSupported() ? perf.now() : Date.now());
+    devtoolsPerfEnd(instance, type, getNow$1());
   }
 }
 function isSupported() {
@@ -6815,6 +7074,9 @@ function baseCreateRenderer(options, createHydrationFns) {
           optimized
         );
         break;
+      case VaporSlot:
+        getVaporInterface(parentComponent, n2).slot(n1, n2, container, anchor);
+        break;
       default:
         if (shapeFlag & 1) {
           processElement(
@@ -7027,11 +7289,15 @@ function baseCreateRenderer(options, createHydrationFns) {
     }
     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) => {
@@ -7043,8 +7309,8 @@ function baseCreateRenderer(options, createHydrationFns) {
         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;
       }
@@ -7161,10 +7427,14 @@ function baseCreateRenderer(options, createHydrationFns) {
       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) => {
@@ -7292,7 +7562,22 @@ function baseCreateRenderer(options, createHydrationFns) {
   };
   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,
@@ -7378,15 +7663,52 @@ function baseCreateRenderer(options, createHydrationFns) {
         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;
@@ -7462,23 +7784,24 @@ function baseCreateRenderer(options, createHydrationFns) {
           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;
         {
@@ -7490,7 +7813,7 @@ function baseCreateRenderer(options, createHydrationFns) {
             }
             nonHydratedAsyncRoot.asyncDep.then(() => {
               if (!instance.isUnmounted) {
-                componentUpdateFn();
+                this.fn();
               }
             });
             return;
@@ -7546,11 +7869,12 @@ function baseCreateRenderer(options, createHydrationFns) {
           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
           );
         }
@@ -7561,21 +7885,21 @@ function baseCreateRenderer(options, createHydrationFns) {
           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;
@@ -7584,9 +7908,9 @@ function baseCreateRenderer(options, createHydrationFns) {
     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;
@@ -7863,7 +8187,13 @@ function baseCreateRenderer(options, createHydrationFns) {
           );
         } else if (moved) {
           if (j < 0 || i !== increasingNewIndexSequence[j]) {
-            move(nextChild, container, anchor, 2);
+            move(
+              nextChild,
+              container,
+              anchor,
+              2,
+              parentComponent
+            );
           } else {
             j--;
           }
@@ -7871,10 +8201,20 @@ function baseCreateRenderer(options, createHydrationFns) {
       }
     }
   };
-  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) {
@@ -7882,13 +8222,25 @@ function baseCreateRenderer(options, createHydrationFns) {
       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;
@@ -7902,7 +8254,11 @@ function baseCreateRenderer(options, createHydrationFns) {
       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 = () => {
@@ -7944,9 +8300,9 @@ function baseCreateRenderer(options, createHydrationFns) {
       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;
@@ -7962,7 +8318,12 @@ function baseCreateRenderer(options, createHydrationFns) {
       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);
@@ -7996,15 +8357,23 @@ function baseCreateRenderer(options, createHydrationFns) {
       } 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) => {
@@ -8061,7 +8430,7 @@ function baseCreateRenderer(options, createHydrationFns) {
     const {
       bum,
       scope,
-      job,
+      effect,
       subTree,
       um,
       m,
@@ -8080,16 +8449,18 @@ function baseCreateRenderer(options, createHydrationFns) {
       });
     }
     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) {
@@ -8107,6 +8478,9 @@ function baseCreateRenderer(options, createHydrationFns) {
   };
   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) {
@@ -8116,7 +8490,6 @@ function baseCreateRenderer(options, createHydrationFns) {
     const teleportEnd = el && el[TeleportEndKey];
     return teleportEnd ? hostNextSibling(teleportEnd) : el;
   };
-  let isFlushing = false;
   const render = (vnode, container, namespace) => {
     if (vnode == null) {
       if (container._vnode) {
@@ -8133,13 +8506,8 @@ function baseCreateRenderer(options, createHydrationFns) {
         namespace
       );
     }
-    container._vnode = vnode;
-    if (!isFlushing) {
-      isFlushing = true;
-      flushPreFlushCbs();
-      flushPostFlushCbs();
-      isFlushing = false;
-    }
+    container._vnode = vnode;
+    flushOnAppMount();
   };
   const internals = {
     p: patch,
@@ -8147,6 +8515,7 @@ function baseCreateRenderer(options, createHydrationFns) {
     m: move,
     r: remove,
     mt: mountComponent,
+    umt: unmountComponent,
     mc: mountChildren,
     pc: patchChildren,
     pbc: patchBlockChildren,
@@ -8160,22 +8529,53 @@ function baseCreateRenderer(options, createHydrationFns) {
       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) {
@@ -8208,46 +8608,6 @@ function traverseStaticChildren(n1, n2, shallow = false) {
     }
   }
 }
-function getSequence(arr) {
-  const p = arr.slice();
-  const result = [0];
-  let i, j, u, v, c;
-  const len = arr.length;
-  for (i = 0; i < len; i++) {
-    const arrI = arr[i];
-    if (arrI !== 0) {
-      j = result[result.length - 1];
-      if (arr[j] < arrI) {
-        p[i] = j;
-        result.push(i);
-        continue;
-      }
-      u = 0;
-      v = result.length - 1;
-      while (u < v) {
-        c = u + v >> 1;
-        if (arr[result[c]] < arrI) {
-          u = c + 1;
-        } else {
-          v = c;
-        }
-      }
-      if (arrI < arr[result[u]]) {
-        if (u > 0) {
-          p[i] = result[u - 1];
-        }
-        result[u] = i;
-      }
-    }
-  }
-  u = result.length;
-  v = result[u - 1];
-  while (u-- > 0) {
-    result[u] = v;
-    v = p[v];
-  }
-  return result;
-}
 function locateNonHydratedAsyncRoot(instance) {
   const subComponent = instance.subTree.component;
   if (subComponent) {
@@ -8261,8 +8621,22 @@ function locateNonHydratedAsyncRoot(instance) {
 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");
@@ -8303,8 +8677,41 @@ function watch(source, cb, options) {
   }
   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(
@@ -8341,42 +8748,32 @@ function doWatch(source, cb, options = EMPTY_OBJ) {
   }
   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);
+  const stop = effect.stop.bind(effect);
+  stop.pause = effect.pause.bind(effect);
+  stop.resume = effect.resume.bind(effect);
+  stop.stop = stop;
   if (isInSSRComponentSetup) {
     if (ssrCleanup) {
-      ssrCleanup.push(watchHandle);
+      ssrCleanup.push(stop);
     } else if (runsImmediately) {
-      watchHandle();
+      stop();
     }
   }
-  return watchHandle;
+  return stop;
 }
 function instanceWatch(source, value, options) {
   const publicThis = this.proxy;
@@ -8388,9 +8785,9 @@ function instanceWatch(source, value, options) {
     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) {
@@ -8405,7 +8802,7 @@ function createPathGetter(ctx, path) {
 }
 
 function useModel(props, name, options = EMPTY_OBJ) {
-  const i = getCurrentInstance();
+  const i = getCurrentGenericInstance();
   if (!i) {
     warn$1(`useModel() called without active instance.`);
     return ref();
@@ -8416,7 +8813,7 @@ function useModel(props, name, options = EMPTY_OBJ) {
     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;
@@ -8438,9 +8835,25 @@ function useModel(props, name, options = EMPTY_OBJ) {
         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();
         }
@@ -8467,21 +8880,26 @@ function useModel(props, name, options = EMPTY_OBJ) {
   };
   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.`
           );
@@ -8501,7 +8919,7 @@ function emit(instance, event, ...rawArgs) {
   }
   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);
@@ -8515,7 +8933,7 @@ function emit(instance, event, ...rawArgs) {
   }
   {
     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,
@@ -8527,10 +8945,10 @@ function emit(instance, event, ...rawArgs) {
     }
   }
   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(
@@ -8540,7 +8958,7 @@ function emit(instance, event, ...rawArgs) {
       args
     );
   }
-  const onceHandler = props[handlerName + `Once`];
+  const onceHandler = getter(props, handlerName + `Once`);
   if (onceHandler) {
     if (!instance.emitted) {
       instance.emitted = {};
@@ -8556,6 +8974,9 @@ function emit(instance, event, ...rawArgs) {
     );
   }
 }
+function defaultPropGetter(props, key) {
+  return props[key];
+}
 function normalizeEmitsOptions(comp, appContext, asMixin = false) {
   const cache = appContext.emitsCache;
   const cached = cache.get(comp);
@@ -8883,7 +9304,7 @@ function hasPropsChanged(prevProps, nextProps, emitsOptions) {
   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;
@@ -9234,7 +9655,8 @@ function createSuspenseBoundary(vnode, parentSuspense, parentComponent, containe
                 pendingBranch,
                 container2,
                 anchor === initialAnchor ? next(activeBranch) : anchor,
-                0
+                0,
+                parentComponent2
               );
               queuePostFlushCb(effects);
             }
@@ -9247,7 +9669,13 @@ function createSuspenseBoundary(vnode, parentSuspense, parentComponent, containe
           unmount(activeBranch, parentComponent2, suspense, true);
         }
         if (!delayEnter) {
-          move(pendingBranch, container2, anchor, 0);
+          move(
+            pendingBranch,
+            container2,
+            anchor,
+            0,
+            parentComponent2
+          );
         }
       }
       setActiveBranch(suspense, pendingBranch);
@@ -9320,7 +9748,7 @@ function createSuspenseBoundary(vnode, parentSuspense, parentComponent, containe
       }
     },
     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() {
@@ -9460,7 +9888,7 @@ function normalizeSuspenseSlot(s) {
   }
   return s;
 }
-function queueEffectWithSuspense(fn, suspense) {
+function queueEffectWithSuspense(fn, id, suspense) {
   if (suspense && suspense.pendingBranch) {
     if (isArray(fn)) {
       suspense.effects.push(...fn);
@@ -9468,7 +9896,7 @@ function queueEffectWithSuspense(fn, suspense) {
       suspense.effects.push(fn);
     }
   } else {
-    queuePostFlushCb(fn);
+    queuePostFlushCb(fn, id);
   }
 }
 function setActiveBranch(suspense, branch) {
@@ -9494,6 +9922,7 @@ const Fragment = Symbol.for("v-fgt");
 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) {
@@ -9867,6 +10296,40 @@ function invokeVNodeHook(hook, instance, vnode, prevVNode = null) {
   ]);
 }
 
+let currentInstance = null;
+const getCurrentGenericInstance = () => currentInstance || currentRenderingInstance;
+const getCurrentInstance = () => currentInstance && !currentInstance.vapor ? currentInstance : currentRenderingInstance;
+let isInSSRComponentSetup = false;
+let setInSSRSetupState;
+let simpleSetCurrentInstance;
+{
+  const g = getGlobalThis();
+  const registerGlobalSetter = (key, setter) => {
+    let setters;
+    if (!(setters = g[key])) setters = g[key] = [];
+    setters.push(setter);
+    return (v) => {
+      if (setters.length > 1) setters.forEach((set) => set(v));
+      else setters[0](v);
+    };
+  };
+  simpleSetCurrentInstance = registerGlobalSetter(
+    `__VUE_INSTANCE_SETTERS__`,
+    (v) => currentInstance = v
+  );
+  setInSSRSetupState = registerGlobalSetter(
+    `__VUE_SSR_SETTERS__`,
+    (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) {
@@ -9911,7 +10374,7 @@ function createComponentInstance(vnode, parent, suspense) {
     // to be set immediately
     emitted: null,
     // props default value
-    propsDefaults: EMPTY_OBJ,
+    propsDefaults: null,
     // inheritAttrs
     inheritAttrs: type.inheritAttrs,
     // state
@@ -9958,44 +10421,6 @@ function createComponentInstance(vnode, parent, suspense) {
   }
   return instance;
 }
-let currentInstance = null;
-const getCurrentInstance = () => currentInstance || currentRenderingInstance;
-let internalSetCurrentInstance;
-let setInSSRSetupState;
-{
-  const g = getGlobalThis();
-  const registerGlobalSetter = (key, setter) => {
-    let setters;
-    if (!(setters = g[key])) setters = g[key] = [];
-    setters.push(setter);
-    return (v) => {
-      if (setters.length > 1) setters.forEach((set) => set(v));
-      else setters[0](v);
-    };
-  };
-  internalSetCurrentInstance = registerGlobalSetter(
-    `__VUE_INSTANCE_SETTERS__`,
-    (v) => currentInstance = v
-  );
-  setInSSRSetupState = registerGlobalSetter(
-    `__VUE_SSR_SETTERS__`,
-    (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(
@@ -10006,13 +10431,16 @@ function validateComponentName(name, { isNativeTag }) {
 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;
@@ -10049,9 +10477,9 @@ function setupStatefulComponent(instance, isSSR) {
   }
   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,
@@ -10062,12 +10490,15 @@ function setupStatefulComponent(instance, isSSR) {
       ]
     );
     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) => {
@@ -10162,13 +10593,13 @@ function finishComponentSetup(instance, isSSR, skipOptions) {
     }
   }
   {
-    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) {
@@ -10205,29 +10636,6 @@ function getSlotsProxy(instance) {
   });
 }
 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;
@@ -10241,10 +10649,33 @@ function createSetupContext(instance) {
       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)), {
@@ -10252,7 +10683,9 @@ function getComponentPublicInstance(instance) {
         if (key in target) {
           return target[key];
         } else if (key in publicPropertiesMap) {
-          return publicPropertiesMap[key](instance);
+          return publicPropertiesMap[key](
+            instance
+          );
         }
       },
       has(target, key) {
@@ -10295,14 +10728,7 @@ function isClassComponent(value) {
 }
 
 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) {
@@ -10343,9 +10769,9 @@ function initCustomFormatter() {
       if (obj.__isVue) {
         return ["div", vueStyle, `VueInstance`];
       } else if (isRef(obj)) {
-        pauseTracking();
+        const prevSub = setActiveSub();
         const value = obj.value;
-        resetTracking();
+        setActiveSub(prevSub);
         return [
           "div",
           {},
@@ -10532,7 +10958,7 @@ function isMemoSame(cached, memo) {
   return true;
 }
 
-const version = "3.5.17";
+const version = "3.6.0-alpha.1";
 const warn = warn$1 ;
 const ErrorTypeStrings = ErrorTypeStrings$1 ;
 const devtools = devtools$1 ;
@@ -11045,8 +11471,9 @@ function setVarsOnNode(el, vars) {
     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;
   }
@@ -11103,11 +11530,11 @@ function patchStyle(el, prev, next) {
 }
 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(
@@ -11180,8 +11607,7 @@ function patchDOMProp(el, key, value, parentComponent, attrName) {
     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,
@@ -11309,8 +11735,6 @@ function patchStopImmediatePropagation(e, 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") {
@@ -11350,24 +11774,9 @@ function shouldSetAsProp(el, key, value, isSVG) {
     }
     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;
   }
@@ -11973,28 +12382,12 @@ const assignKey = Symbol("_assign");
 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 }) {
@@ -12002,70 +12395,111 @@ const vModelText = {
   },
   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));
@@ -12073,7 +12507,7 @@ function setChecked(el, { value, oldValue }, vnode) {
   if (el.checked !== checked) {
     el.checked = checked;
   }
-}
+};
 const vModelRadio = {
   created(el, { value }, vnode) {
     el.checked = looseEqual(value, vnode.props.value);
@@ -12093,36 +12527,38 @@ const vModelSelect = {
   // <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)) {
@@ -12153,13 +12589,20 @@ function setSelected(el, 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) {