@vue/compiler-sfc 2.7.4 → 2.7.5

package/dist/compiler-sfc.js

@@ -3445,145 +3445,6 @@ function setCurrentInstance(vm = null) {
     vm && vm._scope.on();
 }
 
-let warn$3 = noop;
-let tip = noop;
-let generateComponentTrace; // work around flow check
-let formatComponentName;
-if (process.env.NODE_ENV !== 'production') {
-    const hasConsole = typeof console !== 'undefined';
-    const classifyRE = /(?:^|[-_])(\w)/g;
-    const classify = str => str.replace(classifyRE, c => c.toUpperCase()).replace(/[-_]/g, '');
-    warn$3 = (msg, vm = currentInstance) => {
-        const trace = vm ? generateComponentTrace(vm) : '';
-        if (hasConsole && !config.silent) {
-            console.error(`[Vue warn]: ${msg}${trace}`);
-        }
-    };
-    tip = (msg, vm) => {
-        if (hasConsole && !config.silent) {
-            console.warn(`[Vue tip]: ${msg}` + (vm ? generateComponentTrace(vm) : ''));
-        }
-    };
-    formatComponentName = (vm, includeFile) => {
-        if (vm.$root === vm) {
-            return '<Root>';
-        }
-        const options = isFunction(vm) && vm.cid != null
-            ? vm.options
-            : vm._isVue
-                ? vm.$options || vm.constructor.options
-                : vm;
-        let name = options.name || options._componentTag;
-        const file = options.__file;
-        if (!name && file) {
-            const match = file.match(/([^/\\]+)\.vue$/);
-            name = match && match[1];
-        }
-        return ((name ? `<${classify(name)}>` : `<Anonymous>`) +
-            (file && includeFile !== false ? ` at ${file}` : ''));
-    };
-    const repeat = (str, n) => {
-        let res = '';
-        while (n) {
-            if (n % 2 === 1)
-                res += str;
-            if (n > 1)
-                str += str;
-            n >>= 1;
-        }
-        return res;
-    };
-    generateComponentTrace = (vm) => {
-        if (vm._isVue && vm.$parent) {
-            const tree = [];
-            let currentRecursiveSequence = 0;
-            while (vm) {
-                if (tree.length > 0) {
-                    const last = tree[tree.length - 1];
-                    if (last.constructor === vm.constructor) {
-                        currentRecursiveSequence++;
-                        vm = vm.$parent;
-                        continue;
-                    }
-                    else if (currentRecursiveSequence > 0) {
-                        tree[tree.length - 1] = [last, currentRecursiveSequence];
-                        currentRecursiveSequence = 0;
-                    }
-                }
-                tree.push(vm);
-                vm = vm.$parent;
-            }
-            return ('\n\nfound in\n\n' +
-                tree
-                    .map((vm, i) => `${i === 0 ? '---> ' : repeat(' ', 5 + i * 2)}${isArray(vm)
-                    ? `${formatComponentName(vm[0])}... (${vm[1]} recursive calls)`
-                    : formatComponentName(vm)}`)
-                    .join('\n'));
-        }
-        else {
-            return `\n\n(found in ${formatComponentName(vm)})`;
-        }
-    };
-}
-
-let uid = 0;
-/**
- * A dep is an observable that can have multiple
- * directives subscribing to it.
- * @internal
- */
-class Dep {
-    constructor() {
-        this.id = uid++;
-        this.subs = [];
-    }
-    addSub(sub) {
-        this.subs.push(sub);
-    }
-    removeSub(sub) {
-        remove$1(this.subs, sub);
-    }
-    depend(info) {
-        if (Dep.target) {
-            Dep.target.addDep(this);
-            if (process.env.NODE_ENV !== 'production' && info && Dep.target.onTrack) {
-                Dep.target.onTrack(Object.assign({ effect: Dep.target }, info));
-            }
-        }
-    }
-    notify(info) {
-        // stabilize the subscriber list first
-        const subs = this.subs.slice();
-        if (process.env.NODE_ENV !== 'production' && !config.async) {
-            // subs aren't sorted in scheduler if not running async
-            // we need to sort them now to make sure they fire in correct
-            // order
-            subs.sort((a, b) => a.id - b.id);
-        }
-        for (let i = 0, l = subs.length; i < l; i++) {
-            if (process.env.NODE_ENV !== 'production' && info) {
-                const sub = subs[i];
-                sub.onTrigger &&
-                    sub.onTrigger(Object.assign({ effect: subs[i] }, info));
-            }
-            subs[i].update();
-        }
-    }
-}
-// The current target watcher being evaluated.
-// This is globally unique because only one watcher
-// can be evaluated at a time.
-Dep.target = null;
-const targetStack = [];
-function pushTarget(target) {
-    targetStack.push(target);
-    Dep.target = target;
-}
-function popTarget() {
-    targetStack.pop();
-    Dep.target = targetStack[targetStack.length - 1];
-}
-
 /**
  * @internal
  */
@@ -3650,6 +3511,89 @@ function cloneVNode(vnode) {
     return cloned;
 }
 
+/* not type checking this file because flow doesn't play well with Proxy */
+if (process.env.NODE_ENV !== 'production') {
+    makeMap('Infinity,undefined,NaN,isFinite,isNaN,' +
+        'parseFloat,parseInt,decodeURI,decodeURIComponent,encodeURI,encodeURIComponent,' +
+        'Math,Number,Date,Array,Object,Boolean,String,RegExp,Map,Set,JSON,Intl,BigInt,' +
+        'require' // for Webpack/Browserify
+    );
+    const hasProxy = typeof Proxy !== 'undefined' && isNative(Proxy);
+    if (hasProxy) {
+        const isBuiltInModifier = makeMap('stop,prevent,self,ctrl,shift,alt,meta,exact');
+        config.keyCodes = new Proxy(config.keyCodes, {
+            set(target, key, value) {
+                if (isBuiltInModifier(key)) {
+                    warn$3(`Avoid overwriting built-in modifier in config.keyCodes: .${key}`);
+                    return false;
+                }
+                else {
+                    target[key] = value;
+                    return true;
+                }
+            }
+        });
+    }
+}
+
+let uid = 0;
+/**
+ * A dep is an observable that can have multiple
+ * directives subscribing to it.
+ * @internal
+ */
+class Dep {
+    constructor() {
+        this.id = uid++;
+        this.subs = [];
+    }
+    addSub(sub) {
+        this.subs.push(sub);
+    }
+    removeSub(sub) {
+        remove$1(this.subs, sub);
+    }
+    depend(info) {
+        if (Dep.target) {
+            Dep.target.addDep(this);
+            if (process.env.NODE_ENV !== 'production' && info && Dep.target.onTrack) {
+                Dep.target.onTrack(Object.assign({ effect: Dep.target }, info));
+            }
+        }
+    }
+    notify(info) {
+        // stabilize the subscriber list first
+        const subs = this.subs.slice();
+        if (process.env.NODE_ENV !== 'production' && !config.async) {
+            // subs aren't sorted in scheduler if not running async
+            // we need to sort them now to make sure they fire in correct
+            // order
+            subs.sort((a, b) => a.id - b.id);
+        }
+        for (let i = 0, l = subs.length; i < l; i++) {
+            if (process.env.NODE_ENV !== 'production' && info) {
+                const sub = subs[i];
+                sub.onTrigger &&
+                    sub.onTrigger(Object.assign({ effect: subs[i] }, info));
+            }
+            subs[i].update();
+        }
+    }
+}
+// The current target watcher being evaluated.
+// This is globally unique because only one watcher
+// can be evaluated at a time.
+Dep.target = null;
+const targetStack = [];
+function pushTarget(target) {
+    targetStack.push(target);
+    Dep.target = target;
+}
+function popTarget() {
+    targetStack.pop();
+    Dep.target = targetStack[targetStack.length - 1];
+}
+
 /*
  * not type checking this file because flow doesn't play well with
  * dynamically accessing methods on Array prototype
@@ -3701,53 +3645,252 @@ methodsToPatch.forEach(function (method) {
     });
 });
 
-function isReadonly(value) {
-    return !!(value && value.__v_isReadonly);
-}
-
-function isRef(r) {
-    return !!(r && r.__v_isRef === true);
-}
-
-const seenObjects = new _Set();
+const arrayKeys = Object.getOwnPropertyNames(arrayMethods);
+const NO_INIITIAL_VALUE = {};
 /**
- * Recursively traverse an object to evoke all converted
- * getters, so that every nested property inside the object
- * is collected as a "deep" dependency.
+ * In some cases we may want to disable observation inside a component's
+ * update computation.
  */
-function traverse(val) {
-    _traverse(val, seenObjects);
-    seenObjects.clear();
-    return val;
+let shouldObserve = true;
+function toggleObserving(value) {
+    shouldObserve = value;
 }
-function _traverse(val, seen) {
-    let i, keys;
-    const isA = isArray(val);
-    if ((!isA && !isObject$1(val)) ||
-        Object.isFrozen(val) ||
-        val instanceof VNode) {
-        return;
-    }
-    if (val.__ob__) {
-        const depId = val.__ob__.dep.id;
-        if (seen.has(depId)) {
-            return;
+// ssr mock dep
+const mockDep = {
+    notify: noop,
+    depend: noop,
+    addSub: noop,
+    removeSub: noop
+};
+/**
+ * Observer class that is attached to each observed
+ * object. Once attached, the observer converts the target
+ * object's property keys into getter/setters that
+ * collect dependencies and dispatch updates.
+ */
+class Observer {
+    constructor(value, shallow = false, mock = false) {
+        this.value = value;
+        this.shallow = shallow;
+        this.mock = mock;
+        // this.value = value
+        this.dep = mock ? mockDep : new Dep();
+        this.vmCount = 0;
+        def(value, '__ob__', this);
+        if (isArray(value)) {
+            if (!mock) {
+                if (hasProto) {
+                    value.__proto__ = arrayMethods;
+                    /* eslint-enable no-proto */
+                }
+                else {
+                    for (let i = 0, l = arrayKeys.length; i < l; i++) {
+                        const key = arrayKeys[i];
+                        def(value, key, arrayMethods[key]);
+                    }
+                }
+            }
+            if (!shallow) {
+                this.observeArray(value);
+            }
+        }
+        else {
+            /**
+             * Walk through all properties and convert them into
+             * getter/setters. This method should only be called when
+             * value type is Object.
+             */
+            const keys = Object.keys(value);
+            for (let i = 0; i < keys.length; i++) {
+                const key = keys[i];
+                defineReactive(value, key, NO_INIITIAL_VALUE, undefined, shallow, mock);
+            }
         }
-        seen.add(depId);
     }
-    if (isA) {
-        i = val.length;
-        while (i--)
-            _traverse(val[i], seen);
+    /**
+     * Observe a list of Array items.
+     */
+    observeArray(value) {
+        for (let i = 0, l = value.length; i < l; i++) {
+            observe(value[i], false, this.mock);
+        }
+    }
+}
+// helpers
+/**
+ * Attempt to create an observer instance for a value,
+ * returns the new observer if successfully observed,
+ * or the existing observer if the value already has one.
+ */
+function observe(value, shallow, ssrMockReactivity) {
+    if (!isObject$1(value) || isRef(value) || value instanceof VNode) {
+        return;
+    }
+    let ob;
+    if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {
+        ob = value.__ob__;
+    }
+    else if (shouldObserve &&
+        (ssrMockReactivity || !isServerRendering()) &&
+        (isArray(value) || isPlainObject(value)) &&
+        Object.isExtensible(value) &&
+        !value.__v_skip /* ReactiveFlags.SKIP */) {
+        ob = new Observer(value, shallow, ssrMockReactivity);
+    }
+    return ob;
+}
+/**
+ * Define a reactive property on an Object.
+ */
+function defineReactive(obj, key, val, customSetter, shallow, mock) {
+    const dep = new Dep();
+    const property = Object.getOwnPropertyDescriptor(obj, key);
+    if (property && property.configurable === false) {
+        return;
+    }
+    // cater for pre-defined getter/setters
+    const getter = property && property.get;
+    const setter = property && property.set;
+    if ((!getter || setter) &&
+        (val === NO_INIITIAL_VALUE || arguments.length === 2)) {
+        val = obj[key];
+    }
+    let childOb = !shallow && observe(val, false, mock);
+    Object.defineProperty(obj, key, {
+        enumerable: true,
+        configurable: true,
+        get: function reactiveGetter() {
+            const value = getter ? getter.call(obj) : val;
+            if (Dep.target) {
+                if (process.env.NODE_ENV !== 'production') {
+                    dep.depend({
+                        target: obj,
+                        type: "get" /* TrackOpTypes.GET */,
+                        key
+                    });
+                }
+                else {
+                    dep.depend();
+                }
+                if (childOb) {
+                    childOb.dep.depend();
+                    if (isArray(value)) {
+                        dependArray(value);
+                    }
+                }
+            }
+            return isRef(value) && !shallow ? value.value : value;
+        },
+        set: function reactiveSetter(newVal) {
+            const value = getter ? getter.call(obj) : val;
+            if (!hasChanged(value, newVal)) {
+                return;
+            }
+            if (process.env.NODE_ENV !== 'production' && customSetter) {
+                customSetter();
+            }
+            if (setter) {
+                setter.call(obj, newVal);
+            }
+            else if (getter) {
+                // #7981: for accessor properties without setter
+                return;
+            }
+            else if (isRef(value) && !isRef(newVal)) {
+                value.value = newVal;
+                return;
+            }
+            else {
+                val = newVal;
+            }
+            childOb = !shallow && observe(newVal, false, mock);
+            if (process.env.NODE_ENV !== 'production') {
+                dep.notify({
+                    type: "set" /* TriggerOpTypes.SET */,
+                    target: obj,
+                    key,
+                    newValue: newVal,
+                    oldValue: value
+                });
+            }
+            else {
+                dep.notify();
+            }
+        }
+    });
+    return dep;
+}
+function set(target, key, val) {
+    if (process.env.NODE_ENV !== 'production' && (isUndef(target) || isPrimitive(target))) {
+        warn$3(`Cannot set reactive property on undefined, null, or primitive value: ${target}`);
+    }
+    if (isReadonly(target)) {
+        process.env.NODE_ENV !== 'production' && warn$3(`Set operation on key "${key}" failed: target is readonly.`);
+        return;
+    }
+    const ob = target.__ob__;
+    if (isArray(target) && isValidArrayIndex(key)) {
+        target.length = Math.max(target.length, key);
+        target.splice(key, 1, val);
+        // when mocking for SSR, array methods are not hijacked
+        if (ob && !ob.shallow && ob.mock) {
+            observe(val, false, true);
+        }
+        return val;
+    }
+    if (key in target && !(key in Object.prototype)) {
+        target[key] = val;
+        return val;
+    }
+    if (target._isVue || (ob && ob.vmCount)) {
+        process.env.NODE_ENV !== 'production' &&
+            warn$3('Avoid adding reactive properties to a Vue instance or its root $data ' +
+                'at runtime - declare it upfront in the data option.');
+        return val;
+    }
+    if (!ob) {
+        target[key] = val;
+        return val;
+    }
+    defineReactive(ob.value, key, val, undefined, ob.shallow, ob.mock);
+    if (process.env.NODE_ENV !== 'production') {
+        ob.dep.notify({
+            type: "add" /* TriggerOpTypes.ADD */,
+            target: target,
+            key,
+            newValue: val,
+            oldValue: undefined
+        });
     }
     else {
-        keys = Object.keys(val);
-        i = keys.length;
-        while (i--)
-            _traverse(val[keys[i]], seen);
+        ob.dep.notify();
+    }
+    return val;
+}
+/**
+ * Collect dependencies on array elements when the array is touched, since
+ * we cannot intercept array element access like property getters.
+ */
+function dependArray(value) {
+    for (let e, i = 0, l = value.length; i < l; i++) {
+        e = value[i];
+        if (e && e.__ob__) {
+            e.__ob__.dep.depend();
+        }
+        if (isArray(e)) {
+            dependArray(e);
+        }
     }
 }
 
+function isReadonly(value) {
+    return !!(value && value.__v_isReadonly);
+}
+
+function isRef(r) {
+    return !!(r && r.__v_isRef === true);
+}
+
 if (process.env.NODE_ENV !== 'production') ;
 
 const normalizeEvent = cached((name) => {
@@ -3951,295 +4094,156 @@ function normalizeArrayChildren(children, nestedIndex) {
     return res;
 }
 
-/* not type checking this file because flow doesn't play well with Proxy */
-if (process.env.NODE_ENV !== 'production') {
-    makeMap('Infinity,undefined,NaN,isFinite,isNaN,' +
-        'parseFloat,parseInt,decodeURI,decodeURIComponent,encodeURI,encodeURIComponent,' +
-        'Math,Number,Date,Array,Object,Boolean,String,RegExp,Map,Set,JSON,Intl,BigInt,' +
-        'require' // for Webpack/Browserify
-    );
-    const hasProxy = typeof Proxy !== 'undefined' && isNative(Proxy);
-    if (hasProxy) {
-        const isBuiltInModifier = makeMap('stop,prevent,self,ctrl,shift,alt,meta,exact');
-        config.keyCodes = new Proxy(config.keyCodes, {
-            set(target, key, value) {
-                if (isBuiltInModifier(key)) {
-                    warn$3(`Avoid overwriting built-in modifier in config.keyCodes: .${key}`);
-                    return false;
-                }
-                else {
-                    target[key] = value;
-                    return true;
-                }
-            }
-        });
+const SIMPLE_NORMALIZE = 1;
+const ALWAYS_NORMALIZE = 2;
+// wrapper function for providing a more flexible interface
+// without getting yelled at by flow
+function createElement(context, tag, data, children, normalizationType, alwaysNormalize) {
+    if (isArray(data) || isPrimitive(data)) {
+        normalizationType = children;
+        children = data;
+        data = undefined;
     }
-}
-
-function syncSetupAttrs(to, from, prev, instance) {
-    let changed = false;
-    for (const key in from) {
-        if (!(key in to)) {
-            changed = true;
-            defineProxyAttr(to, key, instance);
+    if (isTrue(alwaysNormalize)) {
+        normalizationType = ALWAYS_NORMALIZE;
+    }
+    return _createElement(context, tag, data, children, normalizationType);
+}
+function _createElement(context, tag, data, children, normalizationType) {
+    if (isDef(data) && isDef(data.__ob__)) {
+        process.env.NODE_ENV !== 'production' &&
+            warn$3(`Avoid using observed data object as vnode data: ${JSON.stringify(data)}\n` + 'Always create fresh vnode data objects in each render!', context);
+        return createEmptyVNode();
+    }
+    // object syntax in v-bind
+    if (isDef(data) && isDef(data.is)) {
+        tag = data.is;
+    }
+    if (!tag) {
+        // in case of component :is set to falsy value
+        return createEmptyVNode();
+    }
+    // warn against non-primitive key
+    if (process.env.NODE_ENV !== 'production' && isDef(data) && isDef(data.key) && !isPrimitive(data.key)) {
+        warn$3('Avoid using non-primitive value as key, ' +
+            'use string/number value instead.', context);
+    }
+    // support single function children as default scoped slot
+    if (isArray(children) && isFunction(children[0])) {
+        data = data || {};
+        data.scopedSlots = { default: children[0] };
+        children.length = 0;
+    }
+    if (normalizationType === ALWAYS_NORMALIZE) {
+        children = normalizeChildren(children);
+    }
+    else if (normalizationType === SIMPLE_NORMALIZE) {
+        children = simpleNormalizeChildren(children);
+    }
+    let vnode, ns;
+    if (typeof tag === 'string') {
+        let Ctor;
+        ns = (context.$vnode && context.$vnode.ns) || config.getTagNamespace(tag);
+        if ((!data || !data.pre) &&
+            isDef((Ctor = resolveAsset(context.$options, 'components', tag)))) {
+            // component
+            vnode = createComponent(Ctor, data, context, children, tag);
         }
-        else if (from[key] !== prev[key]) {
-            changed = true;
+        else {
+            // unknown or unlisted namespaced elements
+            // check at runtime because it may get assigned a namespace when its
+            // parent normalizes children
+            vnode = new VNode(tag, data, children, undefined, undefined, context);
         }
     }
-    for (const key in to) {
-        if (!(key in from)) {
-            changed = true;
-            delete to[key];
-        }
+    else {
+        // direct component options / constructor
+        vnode = createComponent(tag, data, context, children);
+    }
+    if (isArray(vnode)) {
+        return vnode;
+    }
+    else if (isDef(vnode)) {
+        if (isDef(ns))
+            applyNS(vnode, ns);
+        if (isDef(data))
+            registerDeepBindings(data);
+        return vnode;
+    }
+    else {
+        return createEmptyVNode();
     }
-    return changed;
 }
-function defineProxyAttr(proxy, key, instance) {
-    Object.defineProperty(proxy, key, {
-        enumerable: true,
-        configurable: true,
-        get() {
-            return instance.$attrs[key];
-        }
-    });
-}
-
-function resolveInject(inject, vm) {
-    if (inject) {
-        // inject is :any because flow is not smart enough to figure out cached
-        const result = Object.create(null);
-        const keys = hasSymbol ? Reflect.ownKeys(inject) : Object.keys(inject);
-        for (let i = 0; i < keys.length; i++) {
-            const key = keys[i];
-            // #6574 in case the inject object is observed...
-            if (key === '__ob__')
-                continue;
-            const provideKey = inject[key].from;
-            if (provideKey in vm._provided) {
-                result[key] = vm._provided[provideKey];
-            }
-            else if ('default' in inject[key]) {
-                const provideDefault = inject[key].default;
-                result[key] = isFunction(provideDefault)
-                    ? provideDefault.call(vm)
-                    : provideDefault;
-            }
-            else if (process.env.NODE_ENV !== 'production') {
-                warn$3(`Injection "${key}" not found`, vm);
-            }
-        }
-        return result;
+function applyNS(vnode, ns, force) {
+    vnode.ns = ns;
+    if (vnode.tag === 'foreignObject') {
+        // use default namespace inside foreignObject
+        ns = undefined;
+        force = true;
     }
-}
-
-function resolveConstructorOptions(Ctor) {
-    let options = Ctor.options;
-    if (Ctor.super) {
-        const superOptions = resolveConstructorOptions(Ctor.super);
-        const cachedSuperOptions = Ctor.superOptions;
-        if (superOptions !== cachedSuperOptions) {
-            // super option changed,
-            // need to resolve new options.
-            Ctor.superOptions = superOptions;
-            // check if there are any late-modified/attached options (#4976)
-            const modifiedOptions = resolveModifiedOptions(Ctor);
-            // update base extend options
-            if (modifiedOptions) {
-                extend(Ctor.extendOptions, modifiedOptions);
-            }
-            options = Ctor.options = mergeOptions(superOptions, Ctor.extendOptions);
-            if (options.name) {
-                options.components[options.name] = Ctor;
+    if (isDef(vnode.children)) {
+        for (let i = 0, l = vnode.children.length; i < l; i++) {
+            const child = vnode.children[i];
+            if (isDef(child.tag) &&
+                (isUndef(child.ns) || (isTrue(force) && child.tag !== 'svg'))) {
+                applyNS(child, ns, force);
             }
         }
     }
-    return options;
 }
-function resolveModifiedOptions(Ctor) {
-    let modified;
-    const latest = Ctor.options;
-    const sealed = Ctor.sealedOptions;
-    for (const key in latest) {
-        if (latest[key] !== sealed[key]) {
-            if (!modified)
-                modified = {};
-            modified[key] = latest[key];
-        }
+// ref #5318
+// necessary to ensure parent re-render when deep bindings like :style and
+// :class are used on slot nodes
+function registerDeepBindings(data) {
+    if (isObject$1(data.style)) {
+        traverse(data.style);
+    }
+    if (isObject$1(data.class)) {
+        traverse(data.class);
     }
-    return modified;
 }
 
 /**
- * Runtime helper for resolving raw children VNodes into a slot object.
+ * Runtime helper for rendering v-for lists.
  */
-function resolveSlots(children, context) {
-    if (!children || !children.length) {
-        return {};
+function renderList(val, render) {
+    let ret = null, i, l, keys, key;
+    if (isArray(val) || typeof val === 'string') {
+        ret = new Array(val.length);
+        for (i = 0, l = val.length; i < l; i++) {
+            ret[i] = render(val[i], i);
+        }
     }
-    const slots = {};
-    for (let i = 0, l = children.length; i < l; i++) {
-        const child = children[i];
-        const data = child.data;
-        // remove slot attribute if the node is resolved as a Vue slot node
-        if (data && data.attrs && data.attrs.slot) {
-            delete data.attrs.slot;
+    else if (typeof val === 'number') {
+        ret = new Array(val);
+        for (i = 0; i < val; i++) {
+            ret[i] = render(i + 1, i);
         }
-        // named slots should only be respected if the vnode was rendered in the
-        // same context.
-        if ((child.context === context || child.fnContext === context) &&
-            data &&
-            data.slot != null) {
-            const name = data.slot;
-            const slot = slots[name] || (slots[name] = []);
-            if (child.tag === 'template') {
-                slot.push.apply(slot, child.children || []);
-            }
-            else {
-                slot.push(child);
+    }
+    else if (isObject$1(val)) {
+        if (hasSymbol && val[Symbol.iterator]) {
+            ret = [];
+            const iterator = val[Symbol.iterator]();
+            let result = iterator.next();
+            while (!result.done) {
+                ret.push(render(result.value, ret.length));
+                result = iterator.next();
             }
         }
         else {
-            (slots.default || (slots.default = [])).push(child);
+            keys = Object.keys(val);
+            ret = new Array(keys.length);
+            for (i = 0, l = keys.length; i < l; i++) {
+                key = keys[i];
+                ret[i] = render(val[key], key, i);
+            }
         }
     }
-    // ignore slots that contains only whitespace
-    for (const name in slots) {
-        if (slots[name].every(isWhitespace)) {
-            delete slots[name];
-        }
+    if (!isDef(ret)) {
+        ret = [];
     }
-    return slots;
-}
-function isWhitespace(node) {
-    return (node.isComment && !node.asyncFactory) || node.text === ' ';
-}
-
-function isAsyncPlaceholder(node) {
-    // @ts-expect-error not really boolean type
-    return node.isComment && node.asyncFactory;
-}
-
-function normalizeScopedSlots(ownerVm, scopedSlots, normalSlots, prevScopedSlots) {
-    let res;
-    const hasNormalSlots = Object.keys(normalSlots).length > 0;
-    const isStable = scopedSlots ? !!scopedSlots.$stable : !hasNormalSlots;
-    const key = scopedSlots && scopedSlots.$key;
-    if (!scopedSlots) {
-        res = {};
-    }
-    else if (scopedSlots._normalized) {
-        // fast path 1: child component re-render only, parent did not change
-        return scopedSlots._normalized;
-    }
-    else if (isStable &&
-        prevScopedSlots &&
-        prevScopedSlots !== emptyObject &&
-        key === prevScopedSlots.$key &&
-        !hasNormalSlots &&
-        !prevScopedSlots.$hasNormal) {
-        // fast path 2: stable scoped slots w/ no normal slots to proxy,
-        // only need to normalize once
-        return prevScopedSlots;
-    }
-    else {
-        res = {};
-        for (const key in scopedSlots) {
-            if (scopedSlots[key] && key[0] !== '$') {
-                res[key] = normalizeScopedSlot(ownerVm, normalSlots, key, scopedSlots[key]);
-            }
-        }
-    }
-    // expose normal slots on scopedSlots
-    for (const key in normalSlots) {
-        if (!(key in res)) {
-            res[key] = proxyNormalSlot(normalSlots, key);
-        }
-    }
-    // avoriaz seems to mock a non-extensible $scopedSlots object
-    // and when that is passed down this would cause an error
-    if (scopedSlots && Object.isExtensible(scopedSlots)) {
-        scopedSlots._normalized = res;
-    }
-    def(res, '$stable', isStable);
-    def(res, '$key', key);
-    def(res, '$hasNormal', hasNormalSlots);
-    return res;
-}
-function normalizeScopedSlot(vm, normalSlots, key, fn) {
-    const normalized = function () {
-        const cur = currentInstance;
-        setCurrentInstance(vm);
-        let res = arguments.length ? fn.apply(null, arguments) : fn({});
-        res =
-            res && typeof res === 'object' && !isArray(res)
-                ? [res] // single vnode
-                : normalizeChildren(res);
-        const vnode = res && res[0];
-        setCurrentInstance(cur);
-        return res &&
-            (!vnode ||
-                (res.length === 1 && vnode.isComment && !isAsyncPlaceholder(vnode))) // #9658, #10391
-            ? undefined
-            : res;
-    };
-    // this is a slot using the new v-slot syntax without scope. although it is
-    // compiled as a scoped slot, render fn users would expect it to be present
-    // on this.$slots because the usage is semantically a normal slot.
-    if (fn.proxy) {
-        Object.defineProperty(normalSlots, key, {
-            get: normalized,
-            enumerable: true,
-            configurable: true
-        });
-    }
-    return normalized;
-}
-function proxyNormalSlot(slots, key) {
-    return () => slots[key];
-}
-
-/**
- * Runtime helper for rendering v-for lists.
- */
-function renderList(val, render) {
-    let ret = null, i, l, keys, key;
-    if (isArray(val) || typeof val === 'string') {
-        ret = new Array(val.length);
-        for (i = 0, l = val.length; i < l; i++) {
-            ret[i] = render(val[i], i);
-        }
-    }
-    else if (typeof val === 'number') {
-        ret = new Array(val);
-        for (i = 0; i < val; i++) {
-            ret[i] = render(i + 1, i);
-        }
-    }
-    else if (isObject$1(val)) {
-        if (hasSymbol && val[Symbol.iterator]) {
-            ret = [];
-            const iterator = val[Symbol.iterator]();
-            let result = iterator.next();
-            while (!result.done) {
-                ret.push(render(result.value, ret.length));
-                result = iterator.next();
-            }
-        }
-        else {
-            keys = Object.keys(val);
-            ret = new Array(keys.length);
-            for (i = 0, l = keys.length; i < l; i++) {
-                key = keys[i];
-                ret[i] = render(val[key], key, i);
-            }
-        }
-    }
-    if (!isDef(ret)) {
-        ret = [];
-    }
-    ret._isVList = true;
-    return ret;
+    ret._isVList = true;
+    return ret;
 }
 
 /**
@@ -4477,417 +4481,162 @@ function installRenderHelpers(target) {
     target._p = prependModifier;
 }
 
-function FunctionalRenderContext(data, props, children, parent, Ctor) {
-    const options = Ctor.options;
-    // ensure the createElement function in functional components
-    // gets a unique context - this is necessary for correct named slot check
-    let contextVm;
-    if (hasOwn(parent, '_uid')) {
-        contextVm = Object.create(parent);
-        contextVm._original = parent;
-    }
-    else {
-        // the context vm passed in is a functional context as well.
-        // in this case we want to make sure we are able to get a hold to the
-        // real context instance.
-        contextVm = parent;
-        // @ts-ignore
-        parent = parent._original;
+/**
+ * Runtime helper for resolving raw children VNodes into a slot object.
+ */
+function resolveSlots(children, context) {
+    if (!children || !children.length) {
+        return {};
     }
-    const isCompiled = isTrue(options._compiled);
-    const needNormalization = !isCompiled;
-    this.data = data;
-    this.props = props;
-    this.children = children;
-    this.parent = parent;
-    this.listeners = data.on || emptyObject;
-    this.injections = resolveInject(options.inject, parent);
-    this.slots = () => {
-        if (!this.$slots) {
-            normalizeScopedSlots(parent, data.scopedSlots, (this.$slots = resolveSlots(children, parent)));
-        }
-        return this.$slots;
-    };
-    Object.defineProperty(this, 'scopedSlots', {
-        enumerable: true,
-        get() {
-            return normalizeScopedSlots(parent, data.scopedSlots, this.slots());
+    const slots = {};
+    for (let i = 0, l = children.length; i < l; i++) {
+        const child = children[i];
+        const data = child.data;
+        // remove slot attribute if the node is resolved as a Vue slot node
+        if (data && data.attrs && data.attrs.slot) {
+            delete data.attrs.slot;
         }
-    });
-    // support for compiled functional template
-    if (isCompiled) {
-        // exposing $options for renderStatic()
-        this.$options = options;
-        // pre-resolve slots for renderSlot()
-        this.$slots = this.slots();
-        this.$scopedSlots = normalizeScopedSlots(parent, data.scopedSlots, this.$slots);
-    }
-    if (options._scopeId) {
-        this._c = (a, b, c, d) => {
-            const vnode = createElement(contextVm, a, b, c, d, needNormalization);
-            if (vnode && !isArray(vnode)) {
-                vnode.fnScopeId = options._scopeId;
-                vnode.fnContext = parent;
+        // named slots should only be respected if the vnode was rendered in the
+        // same context.
+        if ((child.context === context || child.fnContext === context) &&
+            data &&
+            data.slot != null) {
+            const name = data.slot;
+            const slot = slots[name] || (slots[name] = []);
+            if (child.tag === 'template') {
+                slot.push.apply(slot, child.children || []);
+            }
+            else {
+                slot.push(child);
             }
-            return vnode;
-        };
-    }
-    else {
-        this._c = (a, b, c, d) => createElement(contextVm, a, b, c, d, needNormalization);
-    }
-}
-installRenderHelpers(FunctionalRenderContext.prototype);
-function createFunctionalComponent(Ctor, propsData, data, contextVm, children) {
-    const options = Ctor.options;
-    const props = {};
-    const propOptions = options.props;
-    if (isDef(propOptions)) {
-        for (const key in propOptions) {
-            props[key] = validateProp(key, propOptions, propsData || emptyObject);
         }
-    }
-    else {
-        if (isDef(data.attrs))
-            mergeProps(props, data.attrs);
-        if (isDef(data.props))
-            mergeProps(props, data.props);
-    }
-    const renderContext = new FunctionalRenderContext(data, props, children, contextVm, Ctor);
-    const vnode = options.render.call(null, renderContext._c, renderContext);
-    if (vnode instanceof VNode) {
-        return cloneAndMarkFunctionalResult(vnode, data, renderContext.parent, options, renderContext);
-    }
-    else if (isArray(vnode)) {
-        const vnodes = normalizeChildren(vnode) || [];
-        const res = new Array(vnodes.length);
-        for (let i = 0; i < vnodes.length; i++) {
-            res[i] = cloneAndMarkFunctionalResult(vnodes[i], data, renderContext.parent, options, renderContext);
+        else {
+            (slots.default || (slots.default = [])).push(child);
         }
-        return res;
-    }
-}
-function cloneAndMarkFunctionalResult(vnode, data, contextVm, options, renderContext) {
-    // #7817 clone node before setting fnContext, otherwise if the node is reused
-    // (e.g. it was from a cached normal slot) the fnContext causes named slots
-    // that should not be matched to match.
-    const clone = cloneVNode(vnode);
-    clone.fnContext = contextVm;
-    clone.fnOptions = options;
-    if (process.env.NODE_ENV !== 'production') {
-        (clone.devtoolsMeta = clone.devtoolsMeta || {}).renderContext =
-            renderContext;
     }
-    if (data.slot) {
-        (clone.data || (clone.data = {})).slot = data.slot;
+    // ignore slots that contains only whitespace
+    for (const name in slots) {
+        if (slots[name].every(isWhitespace)) {
+            delete slots[name];
+        }
     }
-    return clone;
+    return slots;
 }
-function mergeProps(to, from) {
-    for (const key in from) {
-        to[camelize(key)] = from[key];
-    }
+function isWhitespace(node) {
+    return (node.isComment && !node.asyncFactory) || node.text === ' ';
 }
 
-// inline hooks to be invoked on component VNodes during patch
-const componentVNodeHooks = {
-    init(vnode, hydrating) {
-        if (vnode.componentInstance &&
-            !vnode.componentInstance._isDestroyed &&
-            vnode.data.keepAlive) {
-            // kept-alive components, treat as a patch
-            const mountedNode = vnode; // work around flow
-            componentVNodeHooks.prepatch(mountedNode, mountedNode);
-        }
-        else {
-            const child = (vnode.componentInstance = createComponentInstanceForVnode(vnode, activeInstance));
-            child.$mount(hydrating ? vnode.elm : undefined, hydrating);
-        }
-    },
-    prepatch(oldVnode, vnode) {
-        const options = vnode.componentOptions;
-        const child = (vnode.componentInstance = oldVnode.componentInstance);
-        updateChildComponent(child, options.propsData, // updated props
-        options.listeners, // updated listeners
-        vnode, // new parent vnode
-        options.children // new children
-        );
-    },
-    insert(vnode) {
-        const { context, componentInstance } = vnode;
-        if (!componentInstance._isMounted) {
-            componentInstance._isMounted = true;
-            callHook(componentInstance, 'mounted');
-        }
-        if (vnode.data.keepAlive) {
-            if (context._isMounted) {
-                // vue-router#1212
-                // During updates, a kept-alive component's child components may
-                // change, so directly walking the tree here may call activated hooks
-                // on incorrect children. Instead we push them into a queue which will
-                // be processed after the whole patch process ended.
-                queueActivatedComponent(componentInstance);
-            }
-            else {
-                activateChildComponent(componentInstance, true /* direct */);
-            }
-        }
-    },
-    destroy(vnode) {
-        const { componentInstance } = vnode;
-        if (!componentInstance._isDestroyed) {
-            if (!vnode.data.keepAlive) {
-                componentInstance.$destroy();
-            }
-            else {
-                deactivateChildComponent(componentInstance, true /* direct */);
-            }
-        }
+function isAsyncPlaceholder(node) {
+    // @ts-expect-error not really boolean type
+    return node.isComment && node.asyncFactory;
+}
+
+function normalizeScopedSlots(ownerVm, scopedSlots, normalSlots, prevScopedSlots) {
+    let res;
+    const hasNormalSlots = Object.keys(normalSlots).length > 0;
+    const isStable = scopedSlots ? !!scopedSlots.$stable : !hasNormalSlots;
+    const key = scopedSlots && scopedSlots.$key;
+    if (!scopedSlots) {
+        res = {};
     }
-};
-const hooksToMerge = Object.keys(componentVNodeHooks);
-function createComponent(Ctor, data, context, children, tag) {
-    if (isUndef(Ctor)) {
-        return;
+    else if (scopedSlots._normalized) {
+        // fast path 1: child component re-render only, parent did not change
+        return scopedSlots._normalized;
     }
-    const baseCtor = context.$options._base;
-    // plain options object: turn it into a constructor
-    if (isObject$1(Ctor)) {
-        Ctor = baseCtor.extend(Ctor);
+    else if (isStable &&
+        prevScopedSlots &&
+        prevScopedSlots !== emptyObject &&
+        key === prevScopedSlots.$key &&
+        !hasNormalSlots &&
+        !prevScopedSlots.$hasNormal) {
+        // fast path 2: stable scoped slots w/ no normal slots to proxy,
+        // only need to normalize once
+        return prevScopedSlots;
     }
-    // if at this stage it's not a constructor or an async component factory,
-    // reject.
-    if (typeof Ctor !== 'function') {
-        if (process.env.NODE_ENV !== 'production') {
-            warn$3(`Invalid Component definition: ${String(Ctor)}`, context);
+    else {
+        res = {};
+        for (const key in scopedSlots) {
+            if (scopedSlots[key] && key[0] !== '$') {
+                res[key] = normalizeScopedSlot(ownerVm, normalSlots, key, scopedSlots[key]);
+            }
         }
-        return;
     }
-    // async component
-    let asyncFactory;
-    // @ts-expect-error
-    if (isUndef(Ctor.cid)) {
-        asyncFactory = Ctor;
-        Ctor = resolveAsyncComponent(asyncFactory);
-        if (Ctor === undefined) {
-            // return a placeholder node for async component, which is rendered
-            // as a comment node but preserves all the raw information for the node.
-            // the information will be used for async server-rendering and hydration.
-            return createAsyncPlaceholder(asyncFactory, data, context, children, tag);
+    // expose normal slots on scopedSlots
+    for (const key in normalSlots) {
+        if (!(key in res)) {
+            res[key] = proxyNormalSlot(normalSlots, key);
         }
     }
-    data = data || {};
-    // resolve constructor options in case global mixins are applied after
-    // component constructor creation
-    resolveConstructorOptions(Ctor);
-    // transform component v-model data into props & events
-    if (isDef(data.model)) {
-        // @ts-expect-error
-        transformModel(Ctor.options, data);
-    }
-    // extract props
-    // @ts-expect-error
-    const propsData = extractPropsFromVNodeData(data, Ctor, tag);
-    // functional component
-    // @ts-expect-error
-    if (isTrue(Ctor.options.functional)) {
-        return createFunctionalComponent(Ctor, propsData, data, context, children);
-    }
-    // extract listeners, since these needs to be treated as
-    // child component listeners instead of DOM listeners
-    const listeners = data.on;
-    // replace with listeners with .native modifier
-    // so it gets processed during parent component patch.
-    data.on = data.nativeOn;
-    // @ts-expect-error
-    if (isTrue(Ctor.options.abstract)) {
-        // abstract components do not keep anything
-        // other than props & listeners & slot
-        // work around flow
-        const slot = data.slot;
-        data = {};
-        if (slot) {
-            data.slot = slot;
-        }
+    // avoriaz seems to mock a non-extensible $scopedSlots object
+    // and when that is passed down this would cause an error
+    if (scopedSlots && Object.isExtensible(scopedSlots)) {
+        scopedSlots._normalized = res;
     }
-    // install component management hooks onto the placeholder node
-    installComponentHooks(data);
-    // return a placeholder vnode
-    // @ts-expect-error
-    const name = Ctor.options.name || tag;
-    const vnode = new VNode(
-    // @ts-expect-error
-    `vue-component-${Ctor.cid}${name ? `-${name}` : ''}`, data, undefined, undefined, undefined, context, 
-    // @ts-expect-error
-    { Ctor, propsData, listeners, tag, children }, asyncFactory);
-    return vnode;
+    def(res, '$stable', isStable);
+    def(res, '$key', key);
+    def(res, '$hasNormal', hasNormalSlots);
+    return res;
 }
-function createComponentInstanceForVnode(
-// we know it's MountedComponentVNode but flow doesn't
-vnode, 
-// activeInstance in lifecycle state
-parent) {
-    const options = {
-        _isComponent: true,
-        _parentVnode: vnode,
-        parent
+function normalizeScopedSlot(vm, normalSlots, key, fn) {
+    const normalized = function () {
+        const cur = currentInstance;
+        setCurrentInstance(vm);
+        let res = arguments.length ? fn.apply(null, arguments) : fn({});
+        res =
+            res && typeof res === 'object' && !isArray(res)
+                ? [res] // single vnode
+                : normalizeChildren(res);
+        const vnode = res && res[0];
+        setCurrentInstance(cur);
+        return res &&
+            (!vnode ||
+                (res.length === 1 && vnode.isComment && !isAsyncPlaceholder(vnode))) // #9658, #10391
+            ? undefined
+            : res;
     };
-    // check inline-template render functions
-    const inlineTemplate = vnode.data.inlineTemplate;
-    if (isDef(inlineTemplate)) {
-        options.render = inlineTemplate.render;
-        options.staticRenderFns = inlineTemplate.staticRenderFns;
+    // this is a slot using the new v-slot syntax without scope. although it is
+    // compiled as a scoped slot, render fn users would expect it to be present
+    // on this.$slots because the usage is semantically a normal slot.
+    if (fn.proxy) {
+        Object.defineProperty(normalSlots, key, {
+            get: normalized,
+            enumerable: true,
+            configurable: true
+        });
     }
-    return new vnode.componentOptions.Ctor(options);
+    return normalized;
 }
-function installComponentHooks(data) {
-    const hooks = data.hook || (data.hook = {});
-    for (let i = 0; i < hooksToMerge.length; i++) {
-        const key = hooksToMerge[i];
-        const existing = hooks[key];
-        const toMerge = componentVNodeHooks[key];
-        // @ts-expect-error
-        if (existing !== toMerge && !(existing && existing._merged)) {
-            hooks[key] = existing ? mergeHook(toMerge, existing) : toMerge;
+function proxyNormalSlot(slots, key) {
+    return () => slots[key];
+}
+
+function syncSetupAttrs(to, from, prev, instance) {
+    let changed = false;
+    for (const key in from) {
+        if (!(key in to)) {
+            changed = true;
+            defineProxyAttr(to, key, instance);
         }
-    }
-}
-function mergeHook(f1, f2) {
-    const merged = (a, b) => {
-        // flow complains about extra args which is why we use any
-        f1(a, b);
-        f2(a, b);
-    };
-    merged._merged = true;
-    return merged;
-}
-// transform component v-model info (value and callback) into
-// prop and event handler respectively.
-function transformModel(options, data) {
-    const prop = (options.model && options.model.prop) || 'value';
-    const event = (options.model && options.model.event) || 'input';
-    (data.attrs || (data.attrs = {}))[prop] = data.model.value;
-    const on = data.on || (data.on = {});
-    const existing = on[event];
-    const callback = data.model.callback;
-    if (isDef(existing)) {
-        if (isArray(existing)
-            ? existing.indexOf(callback) === -1
-            : existing !== callback) {
-            on[event] = [callback].concat(existing);
+        else if (from[key] !== prev[key]) {
+            changed = true;
         }
     }
-    else {
-        on[event] = callback;
-    }
-}
-
-const SIMPLE_NORMALIZE = 1;
-const ALWAYS_NORMALIZE = 2;
-// wrapper function for providing a more flexible interface
-// without getting yelled at by flow
-function createElement(context, tag, data, children, normalizationType, alwaysNormalize) {
-    if (isArray(data) || isPrimitive(data)) {
-        normalizationType = children;
-        children = data;
-        data = undefined;
-    }
-    if (isTrue(alwaysNormalize)) {
-        normalizationType = ALWAYS_NORMALIZE;
-    }
-    return _createElement(context, tag, data, children, normalizationType);
-}
-function _createElement(context, tag, data, children, normalizationType) {
-    if (isDef(data) && isDef(data.__ob__)) {
-        process.env.NODE_ENV !== 'production' &&
-            warn$3(`Avoid using observed data object as vnode data: ${JSON.stringify(data)}\n` + 'Always create fresh vnode data objects in each render!', context);
-        return createEmptyVNode();
-    }
-    // object syntax in v-bind
-    if (isDef(data) && isDef(data.is)) {
-        tag = data.is;
-    }
-    if (!tag) {
-        // in case of component :is set to falsy value
-        return createEmptyVNode();
-    }
-    // warn against non-primitive key
-    if (process.env.NODE_ENV !== 'production' && isDef(data) && isDef(data.key) && !isPrimitive(data.key)) {
-        warn$3('Avoid using non-primitive value as key, ' +
-            'use string/number value instead.', context);
-    }
-    // support single function children as default scoped slot
-    if (isArray(children) && isFunction(children[0])) {
-        data = data || {};
-        data.scopedSlots = { default: children[0] };
-        children.length = 0;
-    }
-    if (normalizationType === ALWAYS_NORMALIZE) {
-        children = normalizeChildren(children);
-    }
-    else if (normalizationType === SIMPLE_NORMALIZE) {
-        children = simpleNormalizeChildren(children);
-    }
-    let vnode, ns;
-    if (typeof tag === 'string') {
-        let Ctor;
-        ns = (context.$vnode && context.$vnode.ns) || config.getTagNamespace(tag);
-        if ((!data || !data.pre) &&
-            isDef((Ctor = resolveAsset(context.$options, 'components', tag)))) {
-            // component
-            vnode = createComponent(Ctor, data, context, children, tag);
-        }
-        else {
-            // unknown or unlisted namespaced elements
-            // check at runtime because it may get assigned a namespace when its
-            // parent normalizes children
-            vnode = new VNode(tag, data, children, undefined, undefined, context);
-        }
-    }
-    else {
-        // direct component options / constructor
-        vnode = createComponent(tag, data, context, children);
-    }
-    if (isArray(vnode)) {
-        return vnode;
-    }
-    else if (isDef(vnode)) {
-        if (isDef(ns))
-            applyNS(vnode, ns);
-        if (isDef(data))
-            registerDeepBindings(data);
-        return vnode;
-    }
-    else {
-        return createEmptyVNode();
+    for (const key in to) {
+        if (!(key in from)) {
+            changed = true;
+            delete to[key];
+        }
     }
+    return changed;
 }
-function applyNS(vnode, ns, force) {
-    vnode.ns = ns;
-    if (vnode.tag === 'foreignObject') {
-        // use default namespace inside foreignObject
-        ns = undefined;
-        force = true;
-    }
-    if (isDef(vnode.children)) {
-        for (let i = 0, l = vnode.children.length; i < l; i++) {
-            const child = vnode.children[i];
-            if (isDef(child.tag) &&
-                (isUndef(child.ns) || (isTrue(force) && child.tag !== 'svg'))) {
-                applyNS(child, ns, force);
-            }
+function defineProxyAttr(proxy, key, instance) {
+    Object.defineProperty(proxy, key, {
+        enumerable: true,
+        configurable: true,
+        get() {
+            return instance.$attrs[key];
         }
-    }
-}
-// ref #5318
-// necessary to ensure parent re-render when deep bindings like :style and
-// :class are used on slot nodes
-function registerDeepBindings(data) {
-    if (isObject$1(data.style)) {
-        traverse(data.style);
-    }
-    if (isObject$1(data.class)) {
-        traverse(data.class);
-    }
+    });
 }
 
 function createAsyncPlaceholder(factory, data, context, children, tag) {
@@ -5037,11 +4786,11 @@ function deactivateChildComponent(vm, direct) {
         callHook(vm, 'deactivated');
     }
 }
-function callHook(vm, hook, args) {
+function callHook(vm, hook, args, setContext = true) {
     // #7573 disable dep collection when invoking lifecycle hooks
     pushTarget();
     const prev = currentInstance;
-    setCurrentInstance(vm);
+    setContext && setCurrentInstance(vm);
     const handlers = vm.$options[hook];
     const info = `${hook} hook`;
     if (handlers) {
@@ -5052,7 +4801,7 @@ function callHook(vm, hook, args) {
     if (vm._hasHookEvent) {
         vm.$emit('hook:' + hook);
     }
-    setCurrentInstance(prev);
+    setContext && setCurrentInstance(prev);
     popTarget();
 }
 
@@ -5182,242 +4931,499 @@ else if (!isIE &&
 else if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) ;
 else ;
 
-const arrayKeys = Object.getOwnPropertyNames(arrayMethods);
-const NO_INIITIAL_VALUE = {};
+const seenObjects = new _Set();
 /**
- * In some cases we may want to disable observation inside a component's
- * update computation.
+ * Recursively traverse an object to evoke all converted
+ * getters, so that every nested property inside the object
+ * is collected as a "deep" dependency.
  */
-let shouldObserve = true;
-function toggleObserving(value) {
-    shouldObserve = value;
+function traverse(val) {
+    _traverse(val, seenObjects);
+    seenObjects.clear();
+    return val;
 }
-// ssr mock dep
-const mockDep = {
-    notify: noop,
-    depend: noop,
-    addSub: noop,
-    removeSub: noop
-};
-/**
- * Observer class that is attached to each observed
- * object. Once attached, the observer converts the target
- * object's property keys into getter/setters that
- * collect dependencies and dispatch updates.
- */
-class Observer {
-    constructor(value, shallow = false, mock = false) {
-        this.value = value;
-        this.shallow = shallow;
-        this.mock = mock;
-        // this.value = value
-        this.dep = mock ? mockDep : new Dep();
-        this.vmCount = 0;
-        def(value, '__ob__', this);
-        if (isArray(value)) {
-            if (!mock) {
-                if (hasProto) {
-                    value.__proto__ = arrayMethods;
-                    /* eslint-enable no-proto */
-                }
-                else {
-                    for (let i = 0, l = arrayKeys.length; i < l; i++) {
-                        const key = arrayKeys[i];
-                        def(value, key, arrayMethods[key]);
-                    }
-                }
+function _traverse(val, seen) {
+    let i, keys;
+    const isA = isArray(val);
+    if ((!isA && !isObject$1(val)) ||
+        Object.isFrozen(val) ||
+        val instanceof VNode) {
+        return;
+    }
+    if (val.__ob__) {
+        const depId = val.__ob__.dep.id;
+        if (seen.has(depId)) {
+            return;
+        }
+        seen.add(depId);
+    }
+    if (isA) {
+        i = val.length;
+        while (i--)
+            _traverse(val[i], seen);
+    }
+    else if (isRef(val)) {
+        _traverse(val.value, seen);
+    }
+    else {
+        keys = Object.keys(val);
+        i = keys.length;
+        while (i--)
+            _traverse(val[keys[i]], seen);
+    }
+}
+
+function resolveInject(inject, vm) {
+    if (inject) {
+        // inject is :any because flow is not smart enough to figure out cached
+        const result = Object.create(null);
+        const keys = hasSymbol ? Reflect.ownKeys(inject) : Object.keys(inject);
+        for (let i = 0; i < keys.length; i++) {
+            const key = keys[i];
+            // #6574 in case the inject object is observed...
+            if (key === '__ob__')
+                continue;
+            const provideKey = inject[key].from;
+            if (provideKey in vm._provided) {
+                result[key] = vm._provided[provideKey];
             }
-            if (!shallow) {
-                this.observeArray(value);
+            else if ('default' in inject[key]) {
+                const provideDefault = inject[key].default;
+                result[key] = isFunction(provideDefault)
+                    ? provideDefault.call(vm)
+                    : provideDefault;
+            }
+            else if (process.env.NODE_ENV !== 'production') {
+                warn$3(`Injection "${key}" not found`, vm);
             }
         }
-        else {
-            /**
-             * Walk through all properties and convert them into
-             * getter/setters. This method should only be called when
-             * value type is Object.
-             */
-            const keys = Object.keys(value);
-            for (let i = 0; i < keys.length; i++) {
-                const key = keys[i];
-                defineReactive(value, key, NO_INIITIAL_VALUE, undefined, shallow, mock);
+        return result;
+    }
+}
+
+function resolveConstructorOptions(Ctor) {
+    let options = Ctor.options;
+    if (Ctor.super) {
+        const superOptions = resolveConstructorOptions(Ctor.super);
+        const cachedSuperOptions = Ctor.superOptions;
+        if (superOptions !== cachedSuperOptions) {
+            // super option changed,
+            // need to resolve new options.
+            Ctor.superOptions = superOptions;
+            // check if there are any late-modified/attached options (#4976)
+            const modifiedOptions = resolveModifiedOptions(Ctor);
+            // update base extend options
+            if (modifiedOptions) {
+                extend(Ctor.extendOptions, modifiedOptions);
+            }
+            options = Ctor.options = mergeOptions(superOptions, Ctor.extendOptions);
+            if (options.name) {
+                options.components[options.name] = Ctor;
             }
         }
     }
-    /**
-     * Observe a list of Array items.
-     */
-    observeArray(value) {
-        for (let i = 0, l = value.length; i < l; i++) {
-            observe(value[i], false, this.mock);
+    return options;
+}
+function resolveModifiedOptions(Ctor) {
+    let modified;
+    const latest = Ctor.options;
+    const sealed = Ctor.sealedOptions;
+    for (const key in latest) {
+        if (latest[key] !== sealed[key]) {
+            if (!modified)
+                modified = {};
+            modified[key] = latest[key];
         }
     }
+    return modified;
+}
+
+function FunctionalRenderContext(data, props, children, parent, Ctor) {
+    const options = Ctor.options;
+    // ensure the createElement function in functional components
+    // gets a unique context - this is necessary for correct named slot check
+    let contextVm;
+    if (hasOwn(parent, '_uid')) {
+        contextVm = Object.create(parent);
+        contextVm._original = parent;
+    }
+    else {
+        // the context vm passed in is a functional context as well.
+        // in this case we want to make sure we are able to get a hold to the
+        // real context instance.
+        contextVm = parent;
+        // @ts-ignore
+        parent = parent._original;
+    }
+    const isCompiled = isTrue(options._compiled);
+    const needNormalization = !isCompiled;
+    this.data = data;
+    this.props = props;
+    this.children = children;
+    this.parent = parent;
+    this.listeners = data.on || emptyObject;
+    this.injections = resolveInject(options.inject, parent);
+    this.slots = () => {
+        if (!this.$slots) {
+            normalizeScopedSlots(parent, data.scopedSlots, (this.$slots = resolveSlots(children, parent)));
+        }
+        return this.$slots;
+    };
+    Object.defineProperty(this, 'scopedSlots', {
+        enumerable: true,
+        get() {
+            return normalizeScopedSlots(parent, data.scopedSlots, this.slots());
+        }
+    });
+    // support for compiled functional template
+    if (isCompiled) {
+        // exposing $options for renderStatic()
+        this.$options = options;
+        // pre-resolve slots for renderSlot()
+        this.$slots = this.slots();
+        this.$scopedSlots = normalizeScopedSlots(parent, data.scopedSlots, this.$slots);
+    }
+    if (options._scopeId) {
+        this._c = (a, b, c, d) => {
+            const vnode = createElement(contextVm, a, b, c, d, needNormalization);
+            if (vnode && !isArray(vnode)) {
+                vnode.fnScopeId = options._scopeId;
+                vnode.fnContext = parent;
+            }
+            return vnode;
+        };
+    }
+    else {
+        this._c = (a, b, c, d) => createElement(contextVm, a, b, c, d, needNormalization);
+    }
 }
-// helpers
-/**
- * Attempt to create an observer instance for a value,
- * returns the new observer if successfully observed,
- * or the existing observer if the value already has one.
- */
-function observe(value, shallow, ssrMockReactivity) {
-    if (!isObject$1(value) || isRef(value) || value instanceof VNode) {
-        return;
+installRenderHelpers(FunctionalRenderContext.prototype);
+function createFunctionalComponent(Ctor, propsData, data, contextVm, children) {
+    const options = Ctor.options;
+    const props = {};
+    const propOptions = options.props;
+    if (isDef(propOptions)) {
+        for (const key in propOptions) {
+            props[key] = validateProp(key, propOptions, propsData || emptyObject);
+        }
     }
-    let ob;
-    if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {
-        ob = value.__ob__;
+    else {
+        if (isDef(data.attrs))
+            mergeProps(props, data.attrs);
+        if (isDef(data.props))
+            mergeProps(props, data.props);
     }
-    else if (shouldObserve &&
-        (ssrMockReactivity || !isServerRendering()) &&
-        (isArray(value) || isPlainObject(value)) &&
-        Object.isExtensible(value) &&
-        !value.__v_skip /* ReactiveFlags.SKIP */) {
-        ob = new Observer(value, shallow, ssrMockReactivity);
+    const renderContext = new FunctionalRenderContext(data, props, children, contextVm, Ctor);
+    const vnode = options.render.call(null, renderContext._c, renderContext);
+    if (vnode instanceof VNode) {
+        return cloneAndMarkFunctionalResult(vnode, data, renderContext.parent, options, renderContext);
+    }
+    else if (isArray(vnode)) {
+        const vnodes = normalizeChildren(vnode) || [];
+        const res = new Array(vnodes.length);
+        for (let i = 0; i < vnodes.length; i++) {
+            res[i] = cloneAndMarkFunctionalResult(vnodes[i], data, renderContext.parent, options, renderContext);
+        }
+        return res;
     }
-    return ob;
 }
-/**
- * Define a reactive property on an Object.
- */
-function defineReactive(obj, key, val, customSetter, shallow, mock) {
-    const dep = new Dep();
-    const property = Object.getOwnPropertyDescriptor(obj, key);
-    if (property && property.configurable === false) {
-        return;
+function cloneAndMarkFunctionalResult(vnode, data, contextVm, options, renderContext) {
+    // #7817 clone node before setting fnContext, otherwise if the node is reused
+    // (e.g. it was from a cached normal slot) the fnContext causes named slots
+    // that should not be matched to match.
+    const clone = cloneVNode(vnode);
+    clone.fnContext = contextVm;
+    clone.fnOptions = options;
+    if (process.env.NODE_ENV !== 'production') {
+        (clone.devtoolsMeta = clone.devtoolsMeta || {}).renderContext =
+            renderContext;
     }
-    // cater for pre-defined getter/setters
-    const getter = property && property.get;
-    const setter = property && property.set;
-    if ((!getter || setter) &&
-        (val === NO_INIITIAL_VALUE || arguments.length === 2)) {
-        val = obj[key];
+    if (data.slot) {
+        (clone.data || (clone.data = {})).slot = data.slot;
     }
-    let childOb = !shallow && observe(val, false, mock);
-    Object.defineProperty(obj, key, {
-        enumerable: true,
-        configurable: true,
-        get: function reactiveGetter() {
-            const value = getter ? getter.call(obj) : val;
-            if (Dep.target) {
-                if (process.env.NODE_ENV !== 'production') {
-                    dep.depend({
-                        target: obj,
-                        type: "get" /* TrackOpTypes.GET */,
-                        key
-                    });
-                }
-                else {
-                    dep.depend();
-                }
-                if (childOb) {
-                    childOb.dep.depend();
-                    if (isArray(value)) {
-                        dependArray(value);
-                    }
-                }
-            }
-            return isRef(value) && !shallow ? value.value : value;
-        },
-        set: function reactiveSetter(newVal) {
-            const value = getter ? getter.call(obj) : val;
-            if (!hasChanged(value, newVal)) {
-                return;
-            }
-            if (process.env.NODE_ENV !== 'production' && customSetter) {
-                customSetter();
-            }
-            if (setter) {
-                setter.call(obj, newVal);
-            }
-            else if (getter) {
-                // #7981: for accessor properties without setter
-                return;
-            }
-            else if (isRef(value) && !isRef(newVal)) {
-                value.value = newVal;
-                return;
+    return clone;
+}
+function mergeProps(to, from) {
+    for (const key in from) {
+        to[camelize(key)] = from[key];
+    }
+}
+
+function getComponentName(options) {
+    return options.name || options.__name || options._componentTag;
+}
+// inline hooks to be invoked on component VNodes during patch
+const componentVNodeHooks = {
+    init(vnode, hydrating) {
+        if (vnode.componentInstance &&
+            !vnode.componentInstance._isDestroyed &&
+            vnode.data.keepAlive) {
+            // kept-alive components, treat as a patch
+            const mountedNode = vnode; // work around flow
+            componentVNodeHooks.prepatch(mountedNode, mountedNode);
+        }
+        else {
+            const child = (vnode.componentInstance = createComponentInstanceForVnode(vnode, activeInstance));
+            child.$mount(hydrating ? vnode.elm : undefined, hydrating);
+        }
+    },
+    prepatch(oldVnode, vnode) {
+        const options = vnode.componentOptions;
+        const child = (vnode.componentInstance = oldVnode.componentInstance);
+        updateChildComponent(child, options.propsData, // updated props
+        options.listeners, // updated listeners
+        vnode, // new parent vnode
+        options.children // new children
+        );
+    },
+    insert(vnode) {
+        const { context, componentInstance } = vnode;
+        if (!componentInstance._isMounted) {
+            componentInstance._isMounted = true;
+            callHook(componentInstance, 'mounted');
+        }
+        if (vnode.data.keepAlive) {
+            if (context._isMounted) {
+                // vue-router#1212
+                // During updates, a kept-alive component's child components may
+                // change, so directly walking the tree here may call activated hooks
+                // on incorrect children. Instead we push them into a queue which will
+                // be processed after the whole patch process ended.
+                queueActivatedComponent(componentInstance);
             }
             else {
-                val = newVal;
+                activateChildComponent(componentInstance, true /* direct */);
             }
-            childOb = !shallow && observe(newVal, false, mock);
-            if (process.env.NODE_ENV !== 'production') {
-                dep.notify({
-                    type: "set" /* TriggerOpTypes.SET */,
-                    target: obj,
-                    key,
-                    newValue: newVal,
-                    oldValue: value
-                });
+        }
+    },
+    destroy(vnode) {
+        const { componentInstance } = vnode;
+        if (!componentInstance._isDestroyed) {
+            if (!vnode.data.keepAlive) {
+                componentInstance.$destroy();
             }
             else {
-                dep.notify();
+                deactivateChildComponent(componentInstance, true /* direct */);
             }
         }
-    });
-    return dep;
-}
-function set(target, key, val) {
-    if (process.env.NODE_ENV !== 'production' && (isUndef(target) || isPrimitive(target))) {
-        warn$3(`Cannot set reactive property on undefined, null, or primitive value: ${target}`);
     }
-    if (isReadonly(target)) {
-        process.env.NODE_ENV !== 'production' && warn$3(`Set operation on key "${key}" failed: target is readonly.`);
+};
+const hooksToMerge = Object.keys(componentVNodeHooks);
+function createComponent(Ctor, data, context, children, tag) {
+    if (isUndef(Ctor)) {
         return;
     }
-    const ob = target.__ob__;
-    if (isArray(target) && isValidArrayIndex(key)) {
-        target.length = Math.max(target.length, key);
-        target.splice(key, 1, val);
-        // when mocking for SSR, array methods are not hijacked
-        if (ob && !ob.shallow && ob.mock) {
-            observe(val, false, true);
+    const baseCtor = context.$options._base;
+    // plain options object: turn it into a constructor
+    if (isObject$1(Ctor)) {
+        Ctor = baseCtor.extend(Ctor);
+    }
+    // if at this stage it's not a constructor or an async component factory,
+    // reject.
+    if (typeof Ctor !== 'function') {
+        if (process.env.NODE_ENV !== 'production') {
+            warn$3(`Invalid Component definition: ${String(Ctor)}`, context);
         }
-        return val;
+        return;
     }
-    if (key in target && !(key in Object.prototype)) {
-        target[key] = val;
-        return val;
+    // async component
+    let asyncFactory;
+    // @ts-expect-error
+    if (isUndef(Ctor.cid)) {
+        asyncFactory = Ctor;
+        Ctor = resolveAsyncComponent(asyncFactory);
+        if (Ctor === undefined) {
+            // return a placeholder node for async component, which is rendered
+            // as a comment node but preserves all the raw information for the node.
+            // the information will be used for async server-rendering and hydration.
+            return createAsyncPlaceholder(asyncFactory, data, context, children, tag);
+        }
     }
-    if (target._isVue || (ob && ob.vmCount)) {
-        process.env.NODE_ENV !== 'production' &&
-            warn$3('Avoid adding reactive properties to a Vue instance or its root $data ' +
-                'at runtime - declare it upfront in the data option.');
-        return val;
+    data = data || {};
+    // resolve constructor options in case global mixins are applied after
+    // component constructor creation
+    resolveConstructorOptions(Ctor);
+    // transform component v-model data into props & events
+    if (isDef(data.model)) {
+        // @ts-expect-error
+        transformModel(Ctor.options, data);
     }
-    if (!ob) {
-        target[key] = val;
-        return val;
+    // extract props
+    // @ts-expect-error
+    const propsData = extractPropsFromVNodeData(data, Ctor, tag);
+    // functional component
+    // @ts-expect-error
+    if (isTrue(Ctor.options.functional)) {
+        return createFunctionalComponent(Ctor, propsData, data, context, children);
     }
-    defineReactive(ob.value, key, val, undefined, ob.shallow, ob.mock);
-    if (process.env.NODE_ENV !== 'production') {
-        ob.dep.notify({
-            type: "add" /* TriggerOpTypes.ADD */,
-            target: target,
-            key,
-            newValue: val,
-            oldValue: undefined
-        });
+    // extract listeners, since these needs to be treated as
+    // child component listeners instead of DOM listeners
+    const listeners = data.on;
+    // replace with listeners with .native modifier
+    // so it gets processed during parent component patch.
+    data.on = data.nativeOn;
+    // @ts-expect-error
+    if (isTrue(Ctor.options.abstract)) {
+        // abstract components do not keep anything
+        // other than props & listeners & slot
+        // work around flow
+        const slot = data.slot;
+        data = {};
+        if (slot) {
+            data.slot = slot;
+        }
     }
-    else {
-        ob.dep.notify();
+    // install component management hooks onto the placeholder node
+    installComponentHooks(data);
+    // return a placeholder vnode
+    // @ts-expect-error
+    const name = getComponentName(Ctor.options) || tag;
+    const vnode = new VNode(
+    // @ts-expect-error
+    `vue-component-${Ctor.cid}${name ? `-${name}` : ''}`, data, undefined, undefined, undefined, context, 
+    // @ts-expect-error
+    { Ctor, propsData, listeners, tag, children }, asyncFactory);
+    return vnode;
+}
+function createComponentInstanceForVnode(
+// we know it's MountedComponentVNode but flow doesn't
+vnode, 
+// activeInstance in lifecycle state
+parent) {
+    const options = {
+        _isComponent: true,
+        _parentVnode: vnode,
+        parent
+    };
+    // check inline-template render functions
+    const inlineTemplate = vnode.data.inlineTemplate;
+    if (isDef(inlineTemplate)) {
+        options.render = inlineTemplate.render;
+        options.staticRenderFns = inlineTemplate.staticRenderFns;
     }
-    return val;
+    return new vnode.componentOptions.Ctor(options);
 }
-/**
- * Collect dependencies on array elements when the array is touched, since
- * we cannot intercept array element access like property getters.
- */
-function dependArray(value) {
-    for (let e, i = 0, l = value.length; i < l; i++) {
-        e = value[i];
-        if (e && e.__ob__) {
-            e.__ob__.dep.depend();
+function installComponentHooks(data) {
+    const hooks = data.hook || (data.hook = {});
+    for (let i = 0; i < hooksToMerge.length; i++) {
+        const key = hooksToMerge[i];
+        const existing = hooks[key];
+        const toMerge = componentVNodeHooks[key];
+        // @ts-expect-error
+        if (existing !== toMerge && !(existing && existing._merged)) {
+            hooks[key] = existing ? mergeHook(toMerge, existing) : toMerge;
         }
-        if (isArray(e)) {
-            dependArray(e);
+    }
+}
+function mergeHook(f1, f2) {
+    const merged = (a, b) => {
+        // flow complains about extra args which is why we use any
+        f1(a, b);
+        f2(a, b);
+    };
+    merged._merged = true;
+    return merged;
+}
+// transform component v-model info (value and callback) into
+// prop and event handler respectively.
+function transformModel(options, data) {
+    const prop = (options.model && options.model.prop) || 'value';
+    const event = (options.model && options.model.event) || 'input';
+    (data.attrs || (data.attrs = {}))[prop] = data.model.value;
+    const on = data.on || (data.on = {});
+    const existing = on[event];
+    const callback = data.model.callback;
+    if (isDef(existing)) {
+        if (isArray(existing)
+            ? existing.indexOf(callback) === -1
+            : existing !== callback) {
+            on[event] = [callback].concat(existing);
         }
     }
+    else {
+        on[event] = callback;
+    }
+}
+
+let warn$3 = noop;
+let tip = noop;
+let generateComponentTrace; // work around flow check
+let formatComponentName;
+if (process.env.NODE_ENV !== 'production') {
+    const hasConsole = typeof console !== 'undefined';
+    const classifyRE = /(?:^|[-_])(\w)/g;
+    const classify = str => str.replace(classifyRE, c => c.toUpperCase()).replace(/[-_]/g, '');
+    warn$3 = (msg, vm = currentInstance) => {
+        const trace = vm ? generateComponentTrace(vm) : '';
+        if (hasConsole && !config.silent) {
+            console.error(`[Vue warn]: ${msg}${trace}`);
+        }
+    };
+    tip = (msg, vm) => {
+        if (hasConsole && !config.silent) {
+            console.warn(`[Vue tip]: ${msg}` + (vm ? generateComponentTrace(vm) : ''));
+        }
+    };
+    formatComponentName = (vm, includeFile) => {
+        if (vm.$root === vm) {
+            return '<Root>';
+        }
+        const options = isFunction(vm) && vm.cid != null
+            ? vm.options
+            : vm._isVue
+                ? vm.$options || vm.constructor.options
+                : vm;
+        let name = getComponentName(options);
+        const file = options.__file;
+        if (!name && file) {
+            const match = file.match(/([^/\\]+)\.vue$/);
+            name = match && match[1];
+        }
+        return ((name ? `<${classify(name)}>` : `<Anonymous>`) +
+            (file && includeFile !== false ? ` at ${file}` : ''));
+    };
+    const repeat = (str, n) => {
+        let res = '';
+        while (n) {
+            if (n % 2 === 1)
+                res += str;
+            if (n > 1)
+                str += str;
+            n >>= 1;
+        }
+        return res;
+    };
+    generateComponentTrace = (vm) => {
+        if (vm._isVue && vm.$parent) {
+            const tree = [];
+            let currentRecursiveSequence = 0;
+            while (vm) {
+                if (tree.length > 0) {
+                    const last = tree[tree.length - 1];
+                    if (last.constructor === vm.constructor) {
+                        currentRecursiveSequence++;
+                        vm = vm.$parent;
+                        continue;
+                    }
+                    else if (currentRecursiveSequence > 0) {
+                        tree[tree.length - 1] = [last, currentRecursiveSequence];
+                        currentRecursiveSequence = 0;
+                    }
+                }
+                tree.push(vm);
+                vm = vm.$parent;
+            }
+            return ('\n\nfound in\n\n' +
+                tree
+                    .map((vm, i) => `${i === 0 ? '---> ' : repeat(' ', 5 + i * 2)}${isArray(vm)
+                    ? `${formatComponentName(vm[0])}... (${vm[1]} recursive calls)`
+                    : formatComponentName(vm)}`)
+                    .join('\n'));
+        }
+        else {
+            return `\n\n(found in ${formatComponentName(vm)})`;
+        }
+    };
 }
 
 /**