@vue/compat 3.5.0-alpha.5 → 3.5.0-beta.1

package/dist/vue.cjs.js

@@ -1,5 +1,5 @@
 /**
-* @vue/compat v3.5.0-alpha.5
+* @vue/compat v3.5.0-beta.1
 * (c) 2018-present Yuxi (Evan) You and Vue contributors
 * @license MIT
 **/
@@ -7,7 +7,7 @@
 
 var parser = require('@babel/parser');
 var estreeWalker = require('estree-walker');
-var decode_js = require('entities/lib/decode.js');
+var decode_js = require('entities/dist/decode.js');
 var sourceMapJs = require('source-map-js');
 
 /*! #__NO_SIDE_EFFECTS__ */
@@ -68,9 +68,11 @@ const cacheStringFunction = (fn) => {
   };
 };
 const camelizeRE = /-(\w)/g;
-const camelize = cacheStringFunction((str) => {
-  return str.replace(camelizeRE, (_, c) => c ? c.toUpperCase() : "");
-});
+const camelize = cacheStringFunction(
+  (str) => {
+    return str.replace(camelizeRE, (_, c) => c ? c.toUpperCase() : "");
+  }
+);
 const hyphenateRE = /\B([A-Z])/g;
 const hyphenate = cacheStringFunction(
   (str) => str.replace(hyphenateRE, "-$1").toLowerCase()
@@ -78,10 +80,12 @@ const hyphenate = cacheStringFunction(
 const capitalize = cacheStringFunction((str) => {
   return str.charAt(0).toUpperCase() + str.slice(1);
 });
-const toHandlerKey = cacheStringFunction((str) => {
-  const s = str ? `on${capitalize(str)}` : ``;
-  return s;
-});
+const toHandlerKey = cacheStringFunction(
+  (str) => {
+    const s = str ? `on${capitalize(str)}` : ``;
+    return s;
+  }
+);
 const hasChanged = (value, oldValue) => !Object.is(value, oldValue);
 const invokeArrayFns = (fns, ...arg) => {
   for (let i = 0; i < fns.length; i++) {
@@ -437,6 +441,7 @@ class EffectScope {
      * @internal
      */
     this.cleanups = [];
+    this._isPaused = false;
     this.parent = activeEffectScope;
     if (!detached && activeEffectScope) {
       this.index = (activeEffectScope.scopes || (activeEffectScope.scopes = [])).push(
@@ -447,6 +452,37 @@ class EffectScope {
   get active() {
     return this._active;
   }
+  pause() {
+    if (this._active) {
+      this._isPaused = true;
+      if (this.scopes) {
+        for (let i = 0, l = this.scopes.length; i < l; i++) {
+          this.scopes[i].pause();
+        }
+      }
+      for (let 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;
+        if (this.scopes) {
+          for (let i = 0, l = this.scopes.length; i < l; i++) {
+            this.scopes[i].resume();
+          }
+        }
+        for (let i = 0, l = this.effects.length; i < l; i++) {
+          this.effects[i].resume();
+        }
+      }
+    }
+  }
   run(fn) {
     if (this._active) {
       const currentEffectScope = activeEffectScope;
@@ -517,6 +553,7 @@ function onScopeDispose(fn, failSilently = false) {
 }
 
 let activeSub;
+const pausedQueueEffects = /* @__PURE__ */ new WeakSet();
 class ReactiveEffect {
   constructor(fn) {
     this.fn = fn;
@@ -545,6 +582,18 @@ class ReactiveEffect {
       activeEffectScope.effects.push(this);
     }
   }
+  pause() {
+    this.flags |= 128;
+  }
+  resume() {
+    if (this.flags & 128) {
+      this.flags &= ~128;
+      if (pausedQueueEffects.has(this)) {
+        pausedQueueEffects.delete(this);
+        this.trigger();
+      }
+    }
+  }
   /**
    * @internal
    */
@@ -598,7 +647,9 @@ class ReactiveEffect {
     }
   }
   trigger() {
-    if (this.scheduler) {
+    if (this.flags & 128) {
+      pausedQueueEffects.add(this);
+    } else if (this.scheduler) {
       this.scheduler();
     } else {
       this.runIfDirty();
@@ -918,9 +969,15 @@ function addSub(link) {
   link.dep.subs = link;
 }
 const targetMap = /* @__PURE__ */ new WeakMap();
-const ITERATE_KEY = Symbol("Object iterate" );
-const MAP_KEY_ITERATE_KEY = Symbol("Map keys iterate" );
-const ARRAY_ITERATE_KEY = Symbol("Array iterate" );
+const ITERATE_KEY = Symbol(
+  "Object iterate" 
+);
+const MAP_KEY_ITERATE_KEY = Symbol(
+  "Map keys iterate" 
+);
+const ARRAY_ITERATE_KEY = Symbol(
+  "Array iterate" 
+);
 function track(target, type, key) {
   if (shouldTrack && activeSub) {
     let depsMap = targetMap.get(target);
@@ -1210,7 +1267,7 @@ class BaseReactiveHandler {
       return isShallow2;
     } else if (key === "__v_raw") {
       if (receiver === (isReadonly2 ? isShallow2 ? shallowReadonlyMap : readonlyMap : isShallow2 ? shallowReactiveMap : reactiveMap).get(target) || // receiver is not the reactive proxy, but has the same prototype
-      // this means the reciever is a user proxy of the reactive proxy
+      // this means the receiver is a user proxy of the reactive proxy
       Object.getPrototypeOf(target) === Object.getPrototypeOf(receiver)) {
         return target;
       }
@@ -1334,9 +1391,7 @@ class ReadonlyReactiveHandler extends BaseReactiveHandler {
 }
 const mutableHandlers = /* @__PURE__ */ new MutableReactiveHandler();
 const readonlyHandlers = /* @__PURE__ */ new ReadonlyReactiveHandler();
-const shallowReactiveHandlers = /* @__PURE__ */ new MutableReactiveHandler(
-  true
-);
+const shallowReactiveHandlers = /* @__PURE__ */ new MutableReactiveHandler(true);
 const shallowReadonlyHandlers = /* @__PURE__ */ new ReadonlyReactiveHandler(true);
 
 const toShallow = (value) => value;
@@ -1831,13 +1886,14 @@ function proxyRefs(objectWithRefs) {
 class CustomRefImpl {
   constructor(factory) {
     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));
     this._get = get;
     this._set = set;
   }
   get value() {
-    return this._get();
+    return this._value = this._get();
   }
   set value(newVal) {
     this._set(newVal);
@@ -1862,10 +1918,11 @@ class ObjectRefImpl {
     this._key = _key;
     this._defaultValue = _defaultValue;
     this["__v_isRef"] = true;
+    this._value = void 0;
   }
   get value() {
     const val = this._object[this._key];
-    return val === void 0 ? this._defaultValue : val;
+    return this._value = val === void 0 ? this._defaultValue : val;
   }
   set value(newVal) {
     this._object[this._key] = newVal;
@@ -1879,9 +1936,10 @@ class GetterRefImpl {
     this._getter = _getter;
     this["__v_isRef"] = true;
     this["__v_isReadonly"] = true;
+    this._value = void 0;
   }
   get value() {
-    return this._getter();
+    return this._value = this._getter();
   }
 }
 function toRef(source, key, defaultValue) {
@@ -1915,7 +1973,8 @@ class ComputedRefImpl {
     /**
      * @internal
      */
-    this["__v_isRef"] = true;
+    this.__v_isRef = true;
+    // TODO isolatedDeclarations "__v_isReadonly"
     // A computed is also a subscriber that tracks other deps
     /**
      * @internal
@@ -2540,6 +2599,9 @@ function reload(id, newComp) {
         "[HMR] Root or manually mounted instance modified. Full reload required."
       );
     }
+    if (instance.root.ce && instance !== instance.root) {
+      instance.root.ce._removeChildStyle(oldComp);
+    }
   }
   queuePostFlushCb(() => {
     hmrDirtyComponents.clear();
@@ -2619,9 +2681,7 @@ function devtoolsInitApp(app, version) {
 function devtoolsUnmountApp(app) {
   emit$2("app:unmount" /* APP_UNMOUNT */, app);
 }
-const devtoolsComponentAdded = /* @__PURE__ */ createDevtoolsComponentHook(
-  "component:added" /* COMPONENT_ADDED */
-);
+const devtoolsComponentAdded = /* @__PURE__ */ createDevtoolsComponentHook("component:added" /* COMPONENT_ADDED */);
 const devtoolsComponentUpdated = /* @__PURE__ */ createDevtoolsComponentHook("component:updated" /* COMPONENT_UPDATED */);
 const _devtoolsComponentRemoved = /* @__PURE__ */ createDevtoolsComponentHook(
   "component:removed" /* COMPONENT_REMOVED */
@@ -2645,12 +2705,8 @@ function createDevtoolsComponentHook(hook) {
     );
   };
 }
-const devtoolsPerfStart = /* @__PURE__ */ createDevtoolsPerformanceHook(
-  "perf:start" /* PERFORMANCE_START */
-);
-const devtoolsPerfEnd = /* @__PURE__ */ createDevtoolsPerformanceHook(
-  "perf:end" /* PERFORMANCE_END */
-);
+const devtoolsPerfStart = /* @__PURE__ */ createDevtoolsPerformanceHook("perf:start" /* PERFORMANCE_START */);
+const devtoolsPerfEnd = /* @__PURE__ */ createDevtoolsPerformanceHook("perf:end" /* PERFORMANCE_END */);
 function createDevtoolsPerformanceHook(hook) {
   return (component, type, time) => {
     emit$2(hook, component.appContext.app, component.uid, component, type, time);
@@ -4359,6 +4415,7 @@ Server rendered element contains more child nodes than client vdom.`
       }
       if (props) {
         {
+          const isCustomElement = el.tagName.includes("-");
           for (const key in props) {
             if (// #11189 skip if this node has directives that have created hooks
             // as it could have mutated the DOM in any possible way
@@ -4366,7 +4423,7 @@ Server rendered element contains more child nodes than client vdom.`
               logMismatchError();
             }
             if (forcePatch && (key.endsWith("value") || key === "indeterminate") || isOn(key) && !isReservedProp(key) || // force hydrate v-bind with .prop modifiers
-            key[0] === ".") {
+            key[0] === "." || isCustomElement) {
               patchProp(el, key, null, props[key], void 0, parentComponent);
             }
           }
@@ -4691,24 +4748,19 @@ function isMismatchAllowed(el, allowedType) {
   }
 }
 
-const hydrateOnIdle = () => (hydrate) => {
-  const id = requestIdleCallback(hydrate);
+const hydrateOnIdle = (timeout = 1e4) => (hydrate) => {
+  const id = requestIdleCallback(hydrate, { timeout });
   return () => cancelIdleCallback(id);
 };
-const hydrateOnVisible = (margin = 0) => (hydrate, forEach) => {
-  const ob = new IntersectionObserver(
-    (entries) => {
-      for (const e of entries) {
-        if (!e.isIntersecting) continue;
-        ob.disconnect();
-        hydrate();
-        break;
-      }
-    },
-    {
-      rootMargin: isString(margin) ? margin : margin + "px"
+const hydrateOnVisible = (opts) => (hydrate, forEach) => {
+  const ob = new IntersectionObserver((entries) => {
+    for (const e of entries) {
+      if (!e.isIntersecting) continue;
+      ob.disconnect();
+      hydrate();
+      break;
     }
-  );
+  }, opts);
   forEach((el) => ob.observe(el));
   return () => ob.disconnect();
 };
@@ -5023,7 +5075,7 @@ const KeepAliveImpl = {
     }
     function pruneCacheEntry(key) {
       const cached = cache.get(key);
-      if (!current || !isSameVNodeType(cached, current)) {
+      if (cached && (!current || !isSameVNodeType(cached, current))) {
         unmount(cached);
       } else if (current) {
         resetShapeFlag(current);
@@ -5085,6 +5137,10 @@ const KeepAliveImpl = {
         return rawVNode;
       }
       let vnode = getInnerChild(rawVNode);
+      if (vnode.type === Comment) {
+        current = null;
+        return vnode;
+      }
       const comp = vnode.type;
       const name = getComponentName(
         isAsyncWrapper(vnode) ? vnode.type.__asyncResolved || {} : comp
@@ -5217,17 +5273,19 @@ const createHook = (lifecycle) => (hook, target = currentInstance) => {
 };
 const onBeforeMount = createHook("bm");
 const onMounted = createHook("m");
-const onBeforeUpdate = createHook("bu");
+const onBeforeUpdate = createHook(
+  "bu"
+);
 const onUpdated = createHook("u");
-const onBeforeUnmount = createHook("bum");
-const onUnmounted = createHook("um");
-const onServerPrefetch = createHook("sp");
-const onRenderTriggered = createHook(
-  "rtg"
+const onBeforeUnmount = createHook(
+  "bum"
 );
-const onRenderTracked = createHook(
-  "rtc"
+const onUnmounted = createHook("um");
+const onServerPrefetch = createHook(
+  "sp"
 );
+const onRenderTriggered = createHook("rtg");
+const onRenderTracked = createHook("rtc");
 function onErrorCaptured(hook, target = currentInstance) {
   injectHook("ec", hook, target);
 }
@@ -5641,9 +5699,14 @@ function createSlots(slots, dynamicSlots) {
 }
 
 function renderSlot(slots, name, props = {}, fallback, noSlotted) {
-  if (currentRenderingInstance.isCE || currentRenderingInstance.parent && isAsyncWrapper(currentRenderingInstance.parent) && currentRenderingInstance.parent.isCE) {
+  if (currentRenderingInstance.ce || currentRenderingInstance.parent && isAsyncWrapper(currentRenderingInstance.parent) && currentRenderingInstance.parent.ce) {
     if (name !== "default") props.name = name;
-    return createVNode("slot", props, fallback && fallback());
+    return openBlock(), createBlock(
+      Fragment,
+      null,
+      [createVNode("slot", props, fallback && fallback())],
+      64
+    );
   }
   let slot = slots[name];
   if (slot && slot.length > 1) {
@@ -5945,6 +6008,7 @@ const publicPropertiesMap = (
     $refs: (i) => shallowReadonly(i.refs) ,
     $parent: (i) => getPublicInstance(i.parent),
     $root: (i) => getPublicInstance(i.root),
+    $host: (i) => i.ce,
     $emit: (i) => i.emit,
     $options: (i) => resolveMergedOptions(i) ,
     $forceUpdate: (i) => i.f || (i.f = () => {
@@ -6105,29 +6169,25 @@ const PublicInstanceProxyHandlers = {
     return Reflect.ownKeys(target);
   };
 }
-const RuntimeCompiledPublicInstanceProxyHandlers = /* @__PURE__ */ extend(
-  {},
-  PublicInstanceProxyHandlers,
-  {
-    get(target, key) {
-      if (key === Symbol.unscopables) {
-        return;
-      }
-      return PublicInstanceProxyHandlers.get(target, key, target);
-    },
-    has(_, key) {
-      const has = key[0] !== "_" && !isGloballyAllowed(key);
-      if (!has && PublicInstanceProxyHandlers.has(_, key)) {
-        warn$1(
-          `Property ${JSON.stringify(
-            key
-          )} should not start with _ which is a reserved prefix for Vue internals.`
-        );
-      }
-      return has;
+const RuntimeCompiledPublicInstanceProxyHandlers = /* @__PURE__ */ extend({}, PublicInstanceProxyHandlers, {
+  get(target, key) {
+    if (key === Symbol.unscopables) {
+      return;
     }
+    return PublicInstanceProxyHandlers.get(target, key, target);
+  },
+  has(_, key) {
+    const has = key[0] !== "_" && !isGloballyAllowed(key);
+    if (!has && PublicInstanceProxyHandlers.has(_, key)) {
+      warn$1(
+        `Property ${JSON.stringify(
+          key
+        )} should not start with _ which is a reserved prefix for Vue internals.`
+      );
+    }
+    return has;
   }
-);
+});
 function createDevRenderContext(instance) {
   const target = {};
   Object.defineProperty(target, `_`, {
@@ -6814,7 +6874,7 @@ function createCompatVue$1(createApp, createSingletonApp) {
       return vm;
     }
   }
-  Vue.version = `2.6.14-compat:${"3.5.0-alpha.5"}`;
+  Vue.version = `2.6.14-compat:${"3.5.0-beta.1"}`;
   Vue.config = singletonApp.config;
   Vue.use = (plugin, ...options) => {
     if (plugin && isFunction(plugin.install)) {
@@ -7087,7 +7147,7 @@ function installCompatMount(app, context, render) {
           /* skip options */
         );
       }
-      container.innerHTML = "";
+      container.textContent = "";
       render(vnode, container, namespace);
       if (container instanceof Element) {
         container.removeAttribute("v-cloak");
@@ -7299,7 +7359,7 @@ 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 = createVNode(rootComponent, rootProps);
+          const vnode = app._ceVNode || createVNode(rootComponent, rootProps);
           vnode.appContext = context;
           if (namespace === true) {
             namespace = "svg";
@@ -7404,7 +7464,7 @@ function provide(key, value) {
 function inject(key, defaultValue, treatDefaultAsFactory = false) {
   const instance = currentInstance || currentRenderingInstance;
   if (instance || currentApp) {
-    const provides = instance ? instance.parent == null ? instance.vnode.appContext && instance.vnode.appContext.provides : instance.parent.provides : currentApp._context.provides;
+    const provides = currentApp ? currentApp._context.provides : instance ? instance.parent == null ? instance.vnode.appContext && instance.vnode.appContext.provides : instance.parent.provides : void 0;
     if (provides && key in provides) {
       return provides[key];
     } else if (arguments.length > 1) {
@@ -7678,6 +7738,9 @@ function resolvePropValue(options, props, key, value, instance, isAbsent) {
       } else {
         value = defaultValue;
       }
+      if (instance.ce) {
+        instance.ce._setProp(key, value);
+      }
     }
     if (opt[0 /* shouldCast */]) {
       if (isAbsent && !hasDefault) {
@@ -8680,8 +8743,8 @@ function baseCreateRenderer(options, createHydrationFns) {
     const componentUpdateFn = () => {
       if (!instance.isMounted) {
         let vnodeHook;
-        const { el, props, type } = initialVNode;
-        const { bm, m, parent } = instance;
+        const { el, props } = initialVNode;
+        const { bm, m, parent, root, type } = instance;
         const isAsyncWrapperVNode = isAsyncWrapper(initialVNode);
         toggleRecurse(instance, false);
         if (bm) {
@@ -8727,6 +8790,9 @@ function baseCreateRenderer(options, createHydrationFns) {
             hydrateSubTree();
           }
         } else {
+          if (root.ce) {
+            root.ce._injectChildStyle(type);
+          }
           {
             startMeasure(instance, `render`);
           }
@@ -9430,13 +9496,13 @@ function baseCreateRenderer(options, createHydrationFns) {
         namespace
       );
     }
+    container._vnode = vnode;
     if (!isFlushing) {
       isFlushing = true;
       flushPreFlushCbs();
       flushPostFlushCbs();
       isFlushing = false;
     }
-    container._vnode = vnode;
   };
   const internals = {
     p: patch,
@@ -9610,14 +9676,9 @@ function doWatch(source, cb, {
     const _cb = cb;
     cb = (...args) => {
       _cb(...args);
-      unwatch();
+      watchHandle();
     };
   }
-  if (deep !== void 0 && typeof deep === "number") {
-    warn$1(
-      `watch() "deep" option with number value will be used as watch depth in future versions. Please use a boolean instead to avoid potential breakage.`
-    );
-  }
   if (!cb) {
     if (immediate !== void 0) {
       warn$1(
@@ -9643,10 +9704,12 @@ function doWatch(source, cb, {
     );
   };
   const instance = currentInstance;
-  const reactiveGetter = (source2) => deep === true ? source2 : (
-    // for deep: false, only traverse root-level properties
-    traverse(source2, deep === false ? 1 : void 0)
-  );
+  const reactiveGetter = (source2) => {
+    if (deep) return source2;
+    if (isShallow(source2) || deep === false || deep === 0)
+      return traverse(source2, 1);
+    return traverse(source2);
+  };
   let getter;
   let forceTrigger = false;
   let isMultiSource = false;
@@ -9702,7 +9765,8 @@ function doWatch(source, cb, {
   }
   if (cb && deep) {
     const baseGetter = getter;
-    getter = () => traverse(baseGetter());
+    const depth = deep === true ? Infinity : deep;
+    getter = () => traverse(baseGetter(), depth);
   }
   let cleanup;
   let onCleanup = (fn) => {
@@ -9727,7 +9791,12 @@ function doWatch(source, cb, {
       const ctx = useSSRContext();
       ssrCleanup = ctx.__watcherHandles || (ctx.__watcherHandles = []);
     } else {
-      return NOOP;
+      const watchHandle2 = () => {
+      };
+      watchHandle2.stop = NOOP;
+      watchHandle2.resume = NOOP;
+      watchHandle2.pause = NOOP;
+      return watchHandle2;
     }
   }
   let oldValue = isMultiSource ? new Array(source.length).fill(INITIAL_WATCHER_VALUE) : INITIAL_WATCHER_VALUE;
@@ -9768,12 +9837,15 @@ function doWatch(source, cb, {
   }
   effect.scheduler = scheduler;
   const scope = getCurrentScope();
-  const unwatch = () => {
+  const watchHandle = () => {
     effect.stop();
     if (scope) {
       remove(scope.effects, effect);
     }
   };
+  watchHandle.pause = effect.pause.bind(effect);
+  watchHandle.resume = effect.resume.bind(effect);
+  watchHandle.stop = watchHandle;
   {
     effect.onTrack = onTrack;
     effect.onTrigger = onTrigger;
@@ -9792,8 +9864,8 @@ function doWatch(source, cb, {
   } else {
     effect.run();
   }
-  if (ssrCleanup) ssrCleanup.push(unwatch);
-  return unwatch;
+  if (ssrCleanup) ssrCleanup.push(watchHandle);
+  return watchHandle;
 }
 function instanceWatch(source, value, options) {
   const publicThis = this.proxy;
@@ -9883,7 +9955,8 @@ function useModel(props, name, options = EMPTY_OBJ) {
         return options.get ? options.get(localValue) : localValue;
       },
       set(value) {
-        if (!hasChanged(value, localValue) && !(prevSetValue !== EMPTY_OBJ && hasChanged(value, prevSetValue))) {
+        const emittedValue = options.set ? options.set(value) : value;
+        if (!hasChanged(emittedValue, localValue) && !(prevSetValue !== EMPTY_OBJ && hasChanged(value, prevSetValue))) {
           return;
         }
         const rawProps = i.vnode.props;
@@ -9892,7 +9965,6 @@ function useModel(props, name, options = EMPTY_OBJ) {
           localValue = value;
           trigger();
         }
-        const emittedValue = options.set ? options.set(value) : value;
         i.emit(`update:${name}`, emittedValue);
         if (hasChanged(value, emittedValue) && hasChanged(value, prevSetValue) && !hasChanged(emittedValue, prevEmittedValue)) {
           trigger();
@@ -9930,9 +10002,9 @@ function emit(instance, event, ...rawArgs) {
     } = instance;
     if (emitsOptions) {
       if (!(event in emitsOptions) && !(event.startsWith("hook:") || event.startsWith(compatModelEventPrefix))) {
-        if (!propsOptions || !(toHandlerKey(event) in propsOptions)) {
+        if (!propsOptions || !(toHandlerKey(camelize(event)) in propsOptions)) {
           warn$1(
-            `Component emitted event "${event}" but it is neither declared in the emits option nor as an "${toHandlerKey(event)}" prop.`
+            `Component emitted event "${event}" but it is neither declared in the emits option nor as an "${toHandlerKey(camelize(event))}" prop.`
           );
         }
       } else {
@@ -11863,11 +11935,16 @@ function useTemplateRef(key) {
   const r = shallowRef(null);
   if (i) {
     const refs = i.refs === EMPTY_OBJ ? i.refs = {} : i.refs;
-    Object.defineProperty(refs, key, {
-      enumerable: true,
-      get: () => r.value,
-      set: (val) => r.value = val
-    });
+    let desc;
+    if ((desc = Object.getOwnPropertyDescriptor(refs, key)) && !desc.configurable) {
+      warn$1(`useTemplateRef('${key}') already exists.`);
+    } else {
+      Object.defineProperty(refs, key, {
+        enumerable: true,
+        get: () => r.value,
+        set: (val) => r.value = val
+      });
+    }
   } else {
     warn$1(
       `useTemplateRef() is called when there is no active component instance to be associated with.`
@@ -12101,7 +12178,7 @@ function isMemoSame(cached, memo) {
   return true;
 }
 
-const version = "3.5.0-alpha.5";
+const version = "3.5.0-beta.1";
 const warn = warn$1 ;
 const ErrorTypeStrings = ErrorTypeStrings$1 ;
 const devtools = devtools$1 ;
@@ -12113,7 +12190,8 @@ const _ssrUtils = {
   setCurrentRenderingInstance,
   isVNode: isVNode,
   normalizeVNode,
-  getComponentPublicInstance
+  getComponentPublicInstance,
+  ensureValidVNode
 };
 const ssrUtils = _ssrUtils ;
 const resolveFilter = resolveFilter$1 ;
@@ -12127,6 +12205,18 @@ const _compatUtils = {
 const compatUtils = _compatUtils ;
 const DeprecationTypes = DeprecationTypes$1 ;
 
+let policy = void 0;
+const tt = typeof window !== "undefined" && window.trustedTypes;
+if (tt) {
+  try {
+    policy = /* @__PURE__ */ tt.createPolicy("vue", {
+      createHTML: (val) => val
+    });
+  } catch (e) {
+    warn(`Error creating trusted types policy: ${e}`);
+  }
+}
+const unsafeToTrustedHTML = policy ? (val) => policy.createHTML(val) : (val) => val;
 const svgNS = "http://www.w3.org/2000/svg";
 const mathmlNS = "http://www.w3.org/1998/Math/MathML";
 const doc = typeof document !== "undefined" ? document : null;
@@ -12174,7 +12264,9 @@ const nodeOps = {
         if (start === end || !(start = start.nextSibling)) break;
       }
     } else {
-      templateContainer.innerHTML = namespace === "svg" ? `<svg>${content}</svg>` : namespace === "mathml" ? `<math>${content}</math>` : content;
+      templateContainer.innerHTML = unsafeToTrustedHTML(
+        namespace === "svg" ? `<svg>${content}</svg>` : namespace === "mathml" ? `<math>${content}</math>` : content
+      );
       const template = templateContainer.content;
       if (namespace === "svg" || namespace === "mathml") {
         const wrapper = template.firstChild;
@@ -12922,16 +13014,24 @@ function shouldSetAsProp(el, key, value, isSVG) {
   if (isNativeOn(key) && isString(value)) {
     return false;
   }
-  return key in el;
+  if (key in el) {
+    return true;
+  }
+  if (el._isVueCE && (/[A-Z]/.test(key) || !isString(value))) {
+    return true;
+  }
+  return false;
 }
 
+const REMOVAL = {};
 /*! #__NO_SIDE_EFFECTS__ */
 // @__NO_SIDE_EFFECTS__
-function defineCustomElement(options, extraOptions, hydrate2) {
+function defineCustomElement(options, extraOptions, _createApp) {
   const Comp = defineComponent(options, extraOptions);
+  if (isPlainObject(Comp)) extend(Comp, extraOptions);
   class VueCustomElement extends VueElement {
     constructor(initialProps) {
-      super(Comp, initialProps, hydrate2);
+      super(Comp, initialProps, _createApp);
     }
   }
   VueCustomElement.def = Comp;
@@ -12939,47 +13039,88 @@ function defineCustomElement(options, extraOptions, hydrate2) {
 }
 /*! #__NO_SIDE_EFFECTS__ */
 const defineSSRCustomElement = /* @__NO_SIDE_EFFECTS__ */ (options, extraOptions) => {
-  return /* @__PURE__ */ defineCustomElement(options, extraOptions, hydrate);
+  return /* @__PURE__ */ defineCustomElement(options, extraOptions, createSSRApp);
 };
 const BaseClass = typeof HTMLElement !== "undefined" ? HTMLElement : class {
 };
 class VueElement extends BaseClass {
-  constructor(_def, _props = {}, hydrate2) {
+  constructor(_def, _props = {}, _createApp = createApp) {
     super();
     this._def = _def;
     this._props = _props;
+    this._createApp = _createApp;
+    this._isVueCE = true;
     /**
      * @internal
      */
     this._instance = null;
+    /**
+     * @internal
+     */
+    this._app = null;
+    /**
+     * @internal
+     */
+    this._nonce = this._def.nonce;
     this._connected = false;
     this._resolved = false;
     this._numberProps = null;
+    this._styleChildren = /* @__PURE__ */ new WeakSet();
     this._ob = null;
-    if (this.shadowRoot && hydrate2) {
-      hydrate2(this._createVNode(), this.shadowRoot);
+    if (this.shadowRoot && _createApp !== createApp) {
+      this._root = this.shadowRoot;
+      this._mount(_def);
     } else {
       if (this.shadowRoot) {
         warn(
           `Custom element has pre-rendered declarative shadow root but is not defined as hydratable. Use \`defineSSRCustomElement\`.`
         );
       }
-      this.attachShadow({ mode: "open" });
+      if (_def.shadowRoot !== false) {
+        this.attachShadow({ mode: "open" });
+        this._root = this.shadowRoot;
+      } else {
+        this._root = this;
+      }
       if (!this._def.__asyncLoader) {
         this._resolveProps(this._def);
       }
     }
   }
   connectedCallback() {
+    if (!this.shadowRoot) {
+      this._parseSlots();
+    }
     this._connected = true;
+    let parent = this;
+    while (parent = parent && (parent.parentNode || parent.host)) {
+      if (parent instanceof VueElement) {
+        this._parent = parent;
+        break;
+      }
+    }
     if (!this._instance) {
       if (this._resolved) {
+        this._setParent();
         this._update();
       } else {
-        this._resolveDef();
+        if (parent && parent._pendingResolve) {
+          this._pendingResolve = parent._pendingResolve.then(() => {
+            this._pendingResolve = void 0;
+            this._resolveDef();
+          });
+        } else {
+          this._resolveDef();
+        }
       }
     }
   }
+  _setParent(parent = this._parent) {
+    if (parent) {
+      this._instance.parent = parent._instance;
+      this._instance.provides = parent._instance.provides;
+    }
+  }
   disconnectedCallback() {
     this._connected = false;
     nextTick(() => {
@@ -12988,8 +13129,9 @@ class VueElement extends BaseClass {
           this._ob.disconnect();
           this._ob = null;
         }
-        render(null, this.shadowRoot);
-        this._instance = null;
+        this._app && this._app.unmount();
+        this._instance.ce = void 0;
+        this._app = this._instance = null;
       }
     });
   }
@@ -12997,7 +13139,9 @@ class VueElement extends BaseClass {
    * resolve inner component definition (handle possible async component)
    */
   _resolveDef() {
-    this._resolved = true;
+    if (this._pendingResolve) {
+      return;
+    }
     for (let i = 0; i < this.attributes.length; i++) {
       this._setAttr(this.attributes[i].name);
     }
@@ -13008,6 +13152,8 @@ class VueElement extends BaseClass {
     });
     this._ob.observe(this, { attributes: true });
     const resolve = (def, isAsync = false) => {
+      this._resolved = true;
+      this._pendingResolve = void 0;
       const { props, styles } = def;
       let numberProps;
       if (props && !isArray(props)) {
@@ -13025,22 +13171,53 @@ class VueElement extends BaseClass {
       if (isAsync) {
         this._resolveProps(def);
       }
-      this._applyStyles(styles);
-      this._update();
+      if (this.shadowRoot) {
+        this._applyStyles(styles);
+      } else if (styles) {
+        warn(
+          "Custom element style injection is not supported when using shadowRoot: false"
+        );
+      }
+      this._mount(def);
     };
     const asyncDef = this._def.__asyncLoader;
     if (asyncDef) {
-      asyncDef().then((def) => resolve(def, true));
+      this._pendingResolve = asyncDef().then(
+        (def) => resolve(this._def = def, true)
+      );
     } else {
       resolve(this._def);
     }
   }
+  _mount(def) {
+    if (!def.name) {
+      def.name = "VueElement";
+    }
+    this._app = this._createApp(def);
+    if (def.configureApp) {
+      def.configureApp(this._app);
+    }
+    this._app._ceVNode = this._createVNode();
+    this._app.mount(this._root);
+    const exposed = this._instance && this._instance.exposed;
+    if (!exposed) return;
+    for (const key in exposed) {
+      if (!hasOwn(this, key)) {
+        Object.defineProperty(this, key, {
+          // unwrap ref to be consistent with public instance behavior
+          get: () => unref(exposed[key])
+        });
+      } else {
+        warn(`Exposed property "${key}" already exists on custom element.`);
+      }
+    }
+  }
   _resolveProps(def) {
     const { props } = def;
     const declaredPropKeys = isArray(props) ? props : Object.keys(props || {});
     for (const key of Object.keys(this)) {
       if (key[0] !== "_" && declaredPropKeys.includes(key)) {
-        this._setProp(key, this[key], true, false);
+        this._setProp(key, this[key]);
       }
     }
     for (const key of declaredPropKeys.map(camelize)) {
@@ -13049,18 +13226,20 @@ class VueElement extends BaseClass {
           return this._getProp(key);
         },
         set(val) {
-          this._setProp(key, val);
+          this._setProp(key, val, true, true);
         }
       });
     }
   }
   _setAttr(key) {
-    let value = this.hasAttribute(key) ? this.getAttribute(key) : void 0;
+    if (key.startsWith("data-v-")) return;
+    const has = this.hasAttribute(key);
+    let value = has ? this.getAttribute(key) : REMOVAL;
     const camelKey = camelize(key);
-    if (this._numberProps && this._numberProps[camelKey]) {
+    if (has && this._numberProps && this._numberProps[camelKey]) {
       value = toNumber(value);
     }
-    this._setProp(camelKey, value, false);
+    this._setProp(camelKey, value, false, true);
   }
   /**
    * @internal
@@ -13071,9 +13250,13 @@ class VueElement extends BaseClass {
   /**
    * @internal
    */
-  _setProp(key, val, shouldReflect = true, shouldUpdate = true) {
+  _setProp(key, val, shouldReflect = true, shouldUpdate = false) {
     if (val !== this._props[key]) {
-      this._props[key] = val;
+      if (val === REMOVAL) {
+        delete this._props[key];
+      } else {
+        this._props[key] = val;
+      }
       if (shouldUpdate && this._instance) {
         this._update();
       }
@@ -13089,18 +13272,22 @@ class VueElement extends BaseClass {
     }
   }
   _update() {
-    render(this._createVNode(), this.shadowRoot);
+    render(this._createVNode(), this._root);
   }
   _createVNode() {
-    const vnode = createVNode(this._def, extend({}, this._props));
+    const baseProps = {};
+    if (!this.shadowRoot) {
+      baseProps.onVnodeMounted = baseProps.onVnodeUpdated = this._renderSlots.bind(this);
+    }
+    const vnode = createVNode(this._def, extend(baseProps, this._props));
     if (!this._instance) {
       vnode.ce = (instance) => {
         this._instance = instance;
-        instance.isCE = true;
+        instance.ce = this;
         {
           instance.ceReload = (newStyles) => {
             if (this._styles) {
-              this._styles.forEach((s) => this.shadowRoot.removeChild(s));
+              this._styles.forEach((s) => this._root.removeChild(s));
               this._styles.length = 0;
             }
             this._applyStyles(newStyles);
@@ -13110,9 +13297,10 @@ class VueElement extends BaseClass {
         }
         const dispatch = (event, args) => {
           this.dispatchEvent(
-            new CustomEvent(event, {
-              detail: args
-            })
+            new CustomEvent(
+              event,
+              isPlainObject(args[0]) ? extend({ detail: args }, args[0]) : { detail: args }
+            )
           );
         };
         instance.emit = (event, ...args) => {
@@ -13121,31 +13309,127 @@ class VueElement extends BaseClass {
             dispatch(hyphenate(event), args);
           }
         };
-        let parent = this;
-        while (parent = parent && (parent.parentNode || parent.host)) {
-          if (parent instanceof VueElement) {
-            instance.parent = parent._instance;
-            instance.provides = parent._instance.provides;
-            break;
-          }
-        }
+        this._setParent();
       };
     }
     return vnode;
   }
-  _applyStyles(styles) {
-    if (styles) {
-      styles.forEach((css) => {
-        const s = document.createElement("style");
-        s.textContent = css;
-        this.shadowRoot.appendChild(s);
-        {
+  _applyStyles(styles, owner) {
+    if (!styles) return;
+    if (owner) {
+      if (owner === this._def || this._styleChildren.has(owner)) {
+        return;
+      }
+      this._styleChildren.add(owner);
+    }
+    const nonce = this._nonce;
+    for (let i = styles.length - 1; i >= 0; i--) {
+      const s = document.createElement("style");
+      if (nonce) s.setAttribute("nonce", nonce);
+      s.textContent = styles[i];
+      this.shadowRoot.prepend(s);
+      {
+        if (owner) {
+          if (owner.__hmrId) {
+            if (!this._childStyles) this._childStyles = /* @__PURE__ */ new Map();
+            let entry = this._childStyles.get(owner.__hmrId);
+            if (!entry) {
+              this._childStyles.set(owner.__hmrId, entry = []);
+            }
+            entry.push(s);
+          }
+        } else {
           (this._styles || (this._styles = [])).push(s);
         }
-      });
+      }
+    }
+  }
+  /**
+   * Only called when shaddowRoot is false
+   */
+  _parseSlots() {
+    const slots = this._slots = {};
+    let n;
+    while (n = this.firstChild) {
+      const slotName = n.nodeType === 1 && n.getAttribute("slot") || "default";
+      (slots[slotName] || (slots[slotName] = [])).push(n);
+      this.removeChild(n);
+    }
+  }
+  /**
+   * Only called when shaddowRoot is false
+   */
+  _renderSlots() {
+    const outlets = this.querySelectorAll("slot");
+    const scopeId = this._instance.type.__scopeId;
+    for (let i = 0; i < outlets.length; i++) {
+      const o = outlets[i];
+      const slotName = o.getAttribute("name") || "default";
+      const content = this._slots[slotName];
+      const parent = o.parentNode;
+      if (content) {
+        for (const n of content) {
+          if (scopeId && n.nodeType === 1) {
+            const id = scopeId + "-s";
+            const walker = document.createTreeWalker(n, 1);
+            n.setAttribute(id, "");
+            let child;
+            while (child = walker.nextNode()) {
+              child.setAttribute(id, "");
+            }
+          }
+          parent.insertBefore(n, o);
+        }
+      } else {
+        while (o.firstChild) parent.insertBefore(o.firstChild, o);
+      }
+      parent.removeChild(o);
+    }
+  }
+  /**
+   * @internal
+   */
+  _injectChildStyle(comp) {
+    this._applyStyles(comp.styles, comp);
+  }
+  /**
+   * @internal
+   */
+  _removeChildStyle(comp) {
+    {
+      this._styleChildren.delete(comp);
+      if (this._childStyles && comp.__hmrId) {
+        const oldStyles = this._childStyles.get(comp.__hmrId);
+        if (oldStyles) {
+          oldStyles.forEach((s) => this._root.removeChild(s));
+          oldStyles.length = 0;
+        }
+      }
     }
   }
 }
+function useHost(caller) {
+  const instance = getCurrentInstance();
+  const el = instance && instance.ce;
+  if (el) {
+    return el;
+  } else {
+    if (!instance) {
+      warn(
+        `${caller || "useHost"} called without an active component instance.`
+      );
+    } else {
+      warn(
+        `${caller || "useHost"} can only be used in components defined via defineCustomElement.`
+      );
+    }
+  }
+  return null;
+}
+function useShadowRoot() {
+  const el = useHost("useShadowRoot") ;
+  return el && el.shadowRoot;
+}
 
 function useCssModule(name = "$style") {
   {
@@ -13703,7 +13987,7 @@ const createApp = (...args) => {
     const component = app._component;
     if (!isFunction(component) && !component.render && !component.template) {
       component.template = container.innerHTML;
-      {
+      if (container.nodeType === 1) {
         for (let i = 0; i < container.attributes.length; i++) {
           const attr = container.attributes[i];
           if (attr.name !== "v-cloak" && /^(v-|:|@)/.test(attr.name)) {
@@ -13716,7 +14000,9 @@ const createApp = (...args) => {
         }
       }
     }
-    container.innerHTML = "";
+    if (container.nodeType === 1) {
+      container.textContent = "";
+    }
     const proxy = mount(container, false, resolveRootNamespace(container));
     if (container instanceof Element) {
       container.removeAttribute("v-cloak");
@@ -13950,9 +14236,11 @@ var runtimeDom = /*#__PURE__*/Object.freeze({
   useAttrs: useAttrs,
   useCssModule: useCssModule,
   useCssVars: useCssVars,
+  useHost: useHost,
   useId: useId,
   useModel: useModel,
   useSSRContext: useSSRContext,
+  useShadowRoot: useShadowRoot,
   useSlots: useSlots,
   useTemplateRef: useTemplateRef,
   useTransitionState: useTransitionState,
@@ -13999,36 +14287,70 @@ const FRAGMENT = Symbol(`Fragment` );
 const TELEPORT = Symbol(`Teleport` );
 const SUSPENSE = Symbol(`Suspense` );
 const KEEP_ALIVE = Symbol(`KeepAlive` );
-const BASE_TRANSITION = Symbol(`BaseTransition` );
+const BASE_TRANSITION = Symbol(
+  `BaseTransition` 
+);
 const OPEN_BLOCK = Symbol(`openBlock` );
 const CREATE_BLOCK = Symbol(`createBlock` );
-const CREATE_ELEMENT_BLOCK = Symbol(`createElementBlock` );
+const CREATE_ELEMENT_BLOCK = Symbol(
+  `createElementBlock` 
+);
 const CREATE_VNODE = Symbol(`createVNode` );
-const CREATE_ELEMENT_VNODE = Symbol(`createElementVNode` );
-const CREATE_COMMENT = Symbol(`createCommentVNode` );
-const CREATE_TEXT = Symbol(`createTextVNode` );
-const CREATE_STATIC = Symbol(`createStaticVNode` );
-const RESOLVE_COMPONENT = Symbol(`resolveComponent` );
+const CREATE_ELEMENT_VNODE = Symbol(
+  `createElementVNode` 
+);
+const CREATE_COMMENT = Symbol(
+  `createCommentVNode` 
+);
+const CREATE_TEXT = Symbol(
+  `createTextVNode` 
+);
+const CREATE_STATIC = Symbol(
+  `createStaticVNode` 
+);
+const RESOLVE_COMPONENT = Symbol(
+  `resolveComponent` 
+);
 const RESOLVE_DYNAMIC_COMPONENT = Symbol(
   `resolveDynamicComponent` 
 );
-const RESOLVE_DIRECTIVE = Symbol(`resolveDirective` );
-const RESOLVE_FILTER = Symbol(`resolveFilter` );
-const WITH_DIRECTIVES = Symbol(`withDirectives` );
+const RESOLVE_DIRECTIVE = Symbol(
+  `resolveDirective` 
+);
+const RESOLVE_FILTER = Symbol(
+  `resolveFilter` 
+);
+const WITH_DIRECTIVES = Symbol(
+  `withDirectives` 
+);
 const RENDER_LIST = Symbol(`renderList` );
 const RENDER_SLOT = Symbol(`renderSlot` );
 const CREATE_SLOTS = Symbol(`createSlots` );
-const TO_DISPLAY_STRING = Symbol(`toDisplayString` );
+const TO_DISPLAY_STRING = Symbol(
+  `toDisplayString` 
+);
 const MERGE_PROPS = Symbol(`mergeProps` );
-const NORMALIZE_CLASS = Symbol(`normalizeClass` );
-const NORMALIZE_STYLE = Symbol(`normalizeStyle` );
-const NORMALIZE_PROPS = Symbol(`normalizeProps` );
-const GUARD_REACTIVE_PROPS = Symbol(`guardReactiveProps` );
+const NORMALIZE_CLASS = Symbol(
+  `normalizeClass` 
+);
+const NORMALIZE_STYLE = Symbol(
+  `normalizeStyle` 
+);
+const NORMALIZE_PROPS = Symbol(
+  `normalizeProps` 
+);
+const GUARD_REACTIVE_PROPS = Symbol(
+  `guardReactiveProps` 
+);
 const TO_HANDLERS = Symbol(`toHandlers` );
 const CAMELIZE = Symbol(`camelize` );
 const CAPITALIZE = Symbol(`capitalize` );
-const TO_HANDLER_KEY = Symbol(`toHandlerKey` );
-const SET_BLOCK_TRACKING = Symbol(`setBlockTracking` );
+const TO_HANDLER_KEY = Symbol(
+  `toHandlerKey` 
+);
+const SET_BLOCK_TRACKING = Symbol(
+  `setBlockTracking` 
+);
 const PUSH_SCOPE_ID = Symbol(`pushScopeId` );
 const POP_SCOPE_ID = Symbol(`popScopeId` );
 const WITH_CTX = Symbol(`withCtx` );
@@ -15272,6 +15594,16 @@ function walkIdentifiers(root, onIdentifier, includeAll = false, parentStack = [
             (id) => markScopeIdentifier(node, id, knownIds)
           );
         }
+      } else if (node.type === "CatchClause" && node.param) {
+        for (const id of extractIdentifiers(node.param)) {
+          markScopeIdentifier(node, id, knownIds);
+        }
+      } else if (isForStatement(node)) {
+        walkForStatement(
+          node,
+          false,
+          (id) => markScopeIdentifier(node, id, knownIds)
+        );
       }
     },
     leave(node, parent) {
@@ -15352,14 +15684,20 @@ function walkBlockDeclarations(block, onIdent) {
     } else if (stmt.type === "FunctionDeclaration" || stmt.type === "ClassDeclaration") {
       if (stmt.declare || !stmt.id) continue;
       onIdent(stmt.id);
-    } else if (stmt.type === "ForOfStatement" || stmt.type === "ForInStatement" || stmt.type === "ForStatement") {
-      const variable = stmt.type === "ForStatement" ? stmt.init : stmt.left;
-      if (variable && variable.type === "VariableDeclaration") {
-        for (const decl of variable.declarations) {
-          for (const id of extractIdentifiers(decl.id)) {
-            onIdent(id);
-          }
-        }
+    } else if (isForStatement(stmt)) {
+      walkForStatement(stmt, true, onIdent);
+    }
+  }
+}
+function isForStatement(stmt) {
+  return stmt.type === "ForOfStatement" || stmt.type === "ForInStatement" || stmt.type === "ForStatement";
+}
+function walkForStatement(stmt, isVar, onIdent) {
+  const variable = stmt.type === "ForStatement" ? stmt.init : stmt.left;
+  if (variable && variable.type === "VariableDeclaration" && (variable.kind === "var" ? isVar : !isVar)) {
+    for (const decl of variable.declarations) {
+      for (const id of extractIdentifiers(decl.id)) {
+        onIdent(id);
       }
     }
   }
@@ -19075,7 +19413,7 @@ function resolveComponentType(node, context, ssr = false) {
       } else {
         exp = isProp.exp;
         if (!exp) {
-          exp = createSimpleExpression(`is`, false, isProp.loc);
+          exp = createSimpleExpression(`is`, false, isProp.arg.loc);
           {
             exp = isProp.exp = processExpression(exp, context);
           }
@@ -20173,15 +20511,27 @@ function baseCompile(source, options = {}) {
 const noopDirectiveTransform = () => ({ props: [] });
 
 const V_MODEL_RADIO = Symbol(`vModelRadio` );
-const V_MODEL_CHECKBOX = Symbol(`vModelCheckbox` );
+const V_MODEL_CHECKBOX = Symbol(
+  `vModelCheckbox` 
+);
 const V_MODEL_TEXT = Symbol(`vModelText` );
-const V_MODEL_SELECT = Symbol(`vModelSelect` );
-const V_MODEL_DYNAMIC = Symbol(`vModelDynamic` );
-const V_ON_WITH_MODIFIERS = Symbol(`vOnModifiersGuard` );
-const V_ON_WITH_KEYS = Symbol(`vOnKeysGuard` );
+const V_MODEL_SELECT = Symbol(
+  `vModelSelect` 
+);
+const V_MODEL_DYNAMIC = Symbol(
+  `vModelDynamic` 
+);
+const V_ON_WITH_MODIFIERS = Symbol(
+  `vOnModifiersGuard` 
+);
+const V_ON_WITH_KEYS = Symbol(
+  `vOnKeysGuard` 
+);
 const V_SHOW = Symbol(`vShow` );
 const TRANSITION = Symbol(`Transition` );
-const TRANSITION_GROUP = Symbol(`TransitionGroup` );
+const TRANSITION_GROUP = Symbol(
+  `TransitionGroup` 
+);
 registerRuntimeHelpers({
   [V_MODEL_RADIO]: `vModelRadio`,
   [V_MODEL_CHECKBOX]: `vModelCheckbox`,