vee-validate 4.8.5 → 4.9.0

package/dist/vee-validate.js

@@ -1,5 +1,5 @@
 /**
-  * vee-validate v4.8.4
+  * vee-validate v4.9.0
   * (c) 2023 Abdelrahman Awad
   * @license MIT
   */
@@ -23,6 +23,19 @@
         const n = parseFloat(value);
         return isNaN(n) ? value : n;
     }
+    function merge(target, source) {
+        Object.keys(source).forEach(key => {
+            if (isObject(source[key])) {
+                if (!target[key]) {
+                    target[key] = {};
+                }
+                merge(target[key], source[key]);
+                return;
+            }
+            target[key] = source[key];
+        });
+        return target;
+    }
 
     const RULES = {};
     /**
@@ -393,15 +406,6 @@
     function warn(message) {
         vue.warn(`[vee-validate]: ${message}`);
     }
-    /**
-     * Ensures we deal with a singular field value
-     */
-    function normalizeField(field) {
-        if (Array.isArray(field)) {
-            return field[0];
-        }
-        return field;
-    }
     function resolveNextCheckboxValue(currentValue, checkedValue, uncheckedValue) {
         if (Array.isArray(currentValue)) {
             const newVal = [...currentValue];
@@ -482,6 +486,27 @@
     function lazyToRef(value) {
         return vue.computed(() => unravel(value));
     }
+    function normalizeErrorItem(message) {
+        return Array.isArray(message) ? message : message ? [message] : [];
+    }
+    function resolveFieldOrPathState(path) {
+        const form = injectWithSelf(FormContextKey);
+        const state = path ? vue.computed(() => form === null || form === void 0 ? void 0 : form.getPathState(vue.unref(path))) : undefined;
+        const field = path ? undefined : vue.inject(FieldContextKey);
+        if (!field && !(state === null || state === void 0 ? void 0 : state.value)) {
+            warn(`field with name ${vue.unref(path)} was not found`);
+        }
+        return state || field;
+    }
+    function omit(obj, keys) {
+        const target = {};
+        for (const key in obj) {
+            if (!keys.includes(key)) {
+                target[key] = obj[key];
+            }
+        }
+        return target;
+    }
 
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const normalizeChildren = (tag, context, slotProps) => {
@@ -906,32 +931,64 @@
     let ID_COUNTER = 0;
     function useFieldState(path, init) {
         const { value, initialValue, setInitialValue } = _useFieldValue(path, init.modelValue, init.form);
-        const { errorMessage, errors, setErrors } = _useFieldErrors(path, init.form);
-        const meta = _useFieldMeta(value, initialValue, errors);
-        const id = ID_COUNTER >= Number.MAX_SAFE_INTEGER ? 0 : ++ID_COUNTER;
+        if (!init.form) {
+            const { errors, setErrors } = createFieldErrors();
+            const id = ID_COUNTER >= Number.MAX_SAFE_INTEGER ? 0 : ++ID_COUNTER;
+            const meta = createFieldMeta(value, initialValue, errors);
+            function setState(state) {
+                var _a;
+                if ('value' in state) {
+                    value.value = state.value;
+                }
+                if ('errors' in state) {
+                    setErrors(state.errors);
+                }
+                if ('touched' in state) {
+                    meta.touched = (_a = state.touched) !== null && _a !== void 0 ? _a : meta.touched;
+                }
+                if ('initialValue' in state) {
+                    setInitialValue(state.initialValue);
+                }
+            }
+            return {
+                id,
+                path,
+                value,
+                initialValue,
+                meta,
+                errors,
+                setState,
+            };
+        }
+        const state = init.form.createPathState(path, {
+            bails: init.bails,
+            label: init.label,
+            type: init.type,
+            validate: init.validate,
+        });
+        const errors = vue.computed(() => state.errors);
         function setState(state) {
-            var _a;
+            var _a, _b, _c;
             if ('value' in state) {
                 value.value = state.value;
             }
             if ('errors' in state) {
-                setErrors(state.errors);
+                (_a = init.form) === null || _a === void 0 ? void 0 : _a.setFieldError(vue.unref(path), state.errors);
             }
             if ('touched' in state) {
-                meta.touched = (_a = state.touched) !== null && _a !== void 0 ? _a : meta.touched;
+                (_b = init.form) === null || _b === void 0 ? void 0 : _b.setFieldTouched(vue.unref(path), (_c = state.touched) !== null && _c !== void 0 ? _c : false);
             }
             if ('initialValue' in state) {
                 setInitialValue(state.initialValue);
             }
         }
         return {
-            id,
+            id: Array.isArray(state.id) ? state.id[state.id.length - 1] : state.id,
             path,
             value,
-            initialValue,
-            meta,
             errors,
-            errorMessage,
+            meta: state,
+            initialValue,
             setState,
         };
     }
@@ -944,7 +1001,7 @@
             if (!form) {
                 return vue.unref(modelRef);
             }
-            return getFromPath(form.meta.value.initialValues, vue.unref(path), vue.unref(modelRef));
+            return getFromPath(form.initialValues.value, vue.unref(path), vue.unref(modelRef));
         }
         function setInitialValue(value) {
             if (!form) {
@@ -1002,7 +1059,7 @@
     /**
      * Creates meta flags state and some associated effects with them
      */
-    function _useFieldMeta(currentValue, initialValue, errors) {
+    function createFieldMeta(currentValue, initialValue, errors) {
         const meta = vue.reactive({
             touched: false,
             pending: false,
@@ -1024,29 +1081,12 @@
     /**
      * Creates the error message state for the field state
      */
-    function _useFieldErrors(path, form) {
-        function normalizeErrors(messages) {
-            if (!messages) {
-                return [];
-            }
-            return Array.isArray(messages) ? messages : [messages];
-        }
-        if (!form) {
-            const errors = vue.ref([]);
-            return {
-                errors,
-                errorMessage: vue.computed(() => errors.value[0]),
-                setErrors: (messages) => {
-                    errors.value = normalizeErrors(messages);
-                },
-            };
-        }
-        const errors = vue.computed(() => form.errorBag.value[vue.unref(path)] || []);
+    function createFieldErrors() {
+        const errors = vue.ref([]);
         return {
             errors,
-            errorMessage: vue.computed(() => errors.value[0]),
             setErrors: (messages) => {
-                form.setFieldErrorBag(vue.unref(path), normalizeErrors(messages));
+                errors.value = normalizeErrorItem(messages);
             },
         };
     }
@@ -1056,7 +1096,7 @@
      */
     function useField(path, rules, opts) {
         if (hasCheckedAttr(opts === null || opts === void 0 ? void 0 : opts.type)) {
-            return useCheckboxField(path, rules, opts);
+            return useFieldWithChecked(path, rules, opts);
         }
         return _useField(path, rules, opts);
     }
@@ -1065,12 +1105,30 @@
         const injectedForm = controlled ? injectWithSelf(FormContextKey) : undefined;
         const form = controlForm || injectedForm;
         const name = lazyToRef(path);
-        // a flag indicating if the field is about to be removed/unmounted.
-        let markedForRemoval = false;
-        const { id, value, initialValue, meta, setState, errors, errorMessage } = useFieldState(name, {
+        let PENDING_UNMOUNT = false;
+        const validator = vue.computed(() => {
+            const schema = vue.unref(form === null || form === void 0 ? void 0 : form.schema);
+            if (schema) {
+                return undefined;
+            }
+            const rulesValue = vue.unref(rules);
+            if (isYupValidator(rulesValue) ||
+                isTypedSchema(rulesValue) ||
+                isCallable(rulesValue) ||
+                Array.isArray(rulesValue)) {
+                return rulesValue;
+            }
+            return normalizeRules(rulesValue);
+        });
+        const { id, value, initialValue, meta, setState, errors } = useFieldState(name, {
             modelValue,
             form,
+            bails,
+            label,
+            type,
+            validate: validator.value ? validate$1 : undefined,
         });
+        const errorMessage = vue.computed(() => errors.value[0]);
         if (syncVModel) {
             useVModel({ value, prop: modelPropName, handleChange });
         }
@@ -1080,51 +1138,37 @@
         const handleBlur = () => {
             meta.touched = true;
         };
-        const normalizedRules = vue.computed(() => {
-            let rulesValue = vue.unref(rules);
-            const schema = vue.unref(form === null || form === void 0 ? void 0 : form.schema);
-            if (schema && !isYupValidator(schema) && !isTypedSchema(schema)) {
-                rulesValue = extractRuleFromSchema(schema, vue.unref(name)) || rulesValue;
-            }
-            if (isYupValidator(rulesValue) ||
-                isTypedSchema(rulesValue) ||
-                isCallable(rulesValue) ||
-                Array.isArray(rulesValue)) {
-                return rulesValue;
-            }
-            return normalizeRules(rulesValue);
-        });
         async function validateCurrentValue(mode) {
             var _a, _b;
             if (form === null || form === void 0 ? void 0 : form.validateSchema) {
                 return (_a = (await form.validateSchema(mode)).results[vue.unref(name)]) !== null && _a !== void 0 ? _a : { valid: true, errors: [] };
             }
-            return validate(value.value, normalizedRules.value, {
-                name: vue.unref(name),
-                label: vue.unref(label),
-                values: (_b = form === null || form === void 0 ? void 0 : form.values) !== null && _b !== void 0 ? _b : {},
-                bails,
-            });
+            if (validator.value) {
+                return validate(value.value, validator.value, {
+                    name: vue.unref(name),
+                    label: vue.unref(label),
+                    values: (_b = form === null || form === void 0 ? void 0 : form.values) !== null && _b !== void 0 ? _b : {},
+                    bails,
+                });
+            }
+            return { valid: true, errors: [] };
         }
         const validateWithStateMutation = withLatest(async () => {
             meta.pending = true;
             meta.validated = true;
             return validateCurrentValue('validated-only');
         }, result => {
-            if (markedForRemoval) {
-                result.valid = true;
-                result.errors = [];
+            if (PENDING_UNMOUNT) {
+                return;
             }
             setState({ errors: result.errors });
             meta.pending = false;
+            meta.valid = result.valid;
             return result;
         });
         const validateValidStateOnly = withLatest(async () => {
             return validateCurrentValue('silent');
         }, result => {
-            if (markedForRemoval) {
-                result.valid = true;
-            }
             meta.valid = result.valid;
             return result;
         });
@@ -1137,7 +1181,7 @@
         // Common input/change event handler
         function handleChange(e, shouldValidate = true) {
             const newValue = normalizeEventValue(e);
-            value.value = newValue;
+            setValue(newValue, false);
             if (!validateOnValueUpdate && shouldValidate) {
                 validateWithStateMutation();
             }
@@ -1156,24 +1200,8 @@
         function setTouched(isTouched) {
             meta.touched = isTouched;
         }
-        let unwatchValue;
-        let lastWatchedValue = klona(value.value);
-        function watchValue() {
-            unwatchValue = vue.watch(value, (val, oldVal) => {
-                if (isEqual(val, oldVal) && isEqual(val, lastWatchedValue)) {
-                    return;
-                }
-                const validateFn = validateOnValueUpdate ? validateWithStateMutation : validateValidStateOnly;
-                validateFn();
-                lastWatchedValue = klona(val);
-            }, {
-                deep: true,
-            });
-        }
-        watchValue();
         function resetField(state) {
             var _a;
-            unwatchValue === null || unwatchValue === void 0 ? void 0 : unwatchValue();
             const newValue = state && 'value' in state ? state.value : initialValue.value;
             setState({
                 value: klona(newValue),
@@ -1184,22 +1212,31 @@
             meta.pending = false;
             meta.validated = false;
             validateValidStateOnly();
-            // need to watch at next tick to avoid triggering the value watcher
-            vue.nextTick(() => {
-                watchValue();
-            });
         }
-        function setValue(newValue) {
+        function setValue(newValue, validate = true) {
             value.value = newValue;
+            if (!validate) {
+                return;
+            }
+            const validateFn = validateOnValueUpdate ? validateWithStateMutation : validateValidStateOnly;
+            validateFn();
         }
         function setErrors(errors) {
             setState({ errors: Array.isArray(errors) ? errors : [errors] });
         }
+        const valueProxy = vue.computed({
+            get() {
+                return value.value;
+            },
+            set(newValue) {
+                setValue(newValue, validateOnValueUpdate);
+            },
+        });
         const field = {
             id,
             name,
             label,
-            value,
+            value: valueProxy,
             meta,
             errors,
             errorMessage,
@@ -1234,14 +1271,9 @@
             return field;
         }
         // associate the field with the given form
-        form.register(field);
-        vue.onBeforeUnmount(() => {
-            markedForRemoval = true;
-            form.unregister(field);
-        });
         // extract cross-field dependencies in a computed prop
         const dependencies = vue.computed(() => {
-            const rulesVal = normalizedRules.value;
+            const rulesVal = validator.value;
             // is falsy, a function schema or a yup schema
             if (!rulesVal ||
                 isCallable(rulesVal) ||
@@ -1275,6 +1307,37 @@
                 meta.validated ? validateWithStateMutation() : validateValidStateOnly();
             }
         });
+        vue.onBeforeUnmount(() => {
+            var _a;
+            PENDING_UNMOUNT = true;
+            const shouldKeepValue = (_a = vue.unref(field.keepValueOnUnmount)) !== null && _a !== void 0 ? _a : vue.unref(form.keepValuesOnUnmount);
+            if (shouldKeepValue || !form) {
+                return;
+            }
+            const path = unravel(name);
+            const pathState = form.getPathState(path);
+            const matchesId = Array.isArray(pathState === null || pathState === void 0 ? void 0 : pathState.id) && (pathState === null || pathState === void 0 ? void 0 : pathState.multiple)
+                ? pathState === null || pathState === void 0 ? void 0 : pathState.id.includes(field.id)
+                : (pathState === null || pathState === void 0 ? void 0 : pathState.id) === field.id;
+            if (!matchesId) {
+                return;
+            }
+            if ((pathState === null || pathState === void 0 ? void 0 : pathState.multiple) && Array.isArray(pathState.value)) {
+                const valueIdx = pathState.value.findIndex(i => isEqual(i, vue.unref(field.checkedValue)));
+                if (valueIdx > -1) {
+                    const newVal = [...pathState.value];
+                    newVal.splice(valueIdx, 1);
+                    form.setFieldValue(path, newVal);
+                }
+                if (Array.isArray(pathState.id)) {
+                    pathState.id.splice(pathState.id.indexOf(field.id), 1);
+                }
+            }
+            else {
+                form.unsetPathValue(path);
+            }
+            form.removePathState(path);
+        });
         return field;
     }
     /**
@@ -1305,22 +1368,11 @@
         const controlled = 'standalone' in opts ? !opts.standalone : opts.controlled;
         return Object.assign(Object.assign(Object.assign({}, defaults()), (opts || {})), { initialValue, controlled: controlled !== null && controlled !== void 0 ? controlled : true, checkedValue });
     }
-    /**
-     * Extracts the validation rules from a schema
-     */
-    function extractRuleFromSchema(schema, fieldName) {
-        // no schema at all
-        if (!schema) {
-            return undefined;
-        }
-        // there is a key on the schema object for this field
-        return schema[fieldName];
-    }
-    function useCheckboxField(name, rules, opts) {
+    function useFieldWithChecked(name, rules, opts) {
         const form = !(opts === null || opts === void 0 ? void 0 : opts.standalone) ? injectWithSelf(FormContextKey) : undefined;
         const checkedValue = opts === null || opts === void 0 ? void 0 : opts.checkedValue;
         const uncheckedValue = opts === null || opts === void 0 ? void 0 : opts.uncheckedValue;
-        function patchCheckboxApi(field) {
+        function patchCheckedApi(field) {
             const handleChange = field.handleChange;
             const checked = vue.computed(() => {
                 const currentValue = vue.unref(field.value);
@@ -1337,9 +1389,15 @@
                     }
                     return;
                 }
-                let newValue = normalizeEventValue(e);
-                // Single checkbox field without a form to toggle it's value
-                if (!form) {
+                const path = unravel(name);
+                const pathState = form === null || form === void 0 ? void 0 : form.getPathState(path);
+                const value = normalizeEventValue(e);
+                let newValue;
+                if (form && (pathState === null || pathState === void 0 ? void 0 : pathState.multiple) && pathState.type === 'checkbox') {
+                    newValue = resolveNextCheckboxValue(getFromPath(form.values, path) || [], value, undefined);
+                }
+                else {
+                    // Single checkbox field without a form to toggle it's value
                     newValue = resolveNextCheckboxValue(vue.unref(field.value), vue.unref(checkedValue), vue.unref(uncheckedValue));
                 }
                 handleChange(newValue, shouldValidate);
@@ -1348,7 +1406,7 @@
                 checkedValue,
                 uncheckedValue, handleChange: handleCheckboxChange });
         }
-        return patchCheckboxApi(_useField(name, rules, opts));
+        return patchCheckedApi(_useField(name, rules, opts));
     }
     function useVModel({ prop, value, handleChange }) {
         const vm = vue.getCurrentInstance();
@@ -1571,6 +1629,7 @@
     const Field = FieldImpl;
 
     let FORM_COUNTER = 0;
+    const PRIVATE_PATH_STATE_KEYS = ['bails', 'fieldsCount', 'id', 'multiple', 'type', 'validate'];
     function resolveInitialValues(opts) {
         const providedValues = vue.unref(opts === null || opts === void 0 ? void 0 : opts.initialValues) || {};
         const schema = vue.unref(opts === null || opts === void 0 ? void 0 : opts.validationSchema);
@@ -1582,12 +1641,8 @@
     function useForm(opts) {
         var _a;
         const formId = FORM_COUNTER++;
-        const controlledModelPaths = new Set();
         // Prevents fields from double resetting their values, which causes checkboxes to toggle their initial value
-        // TODO: This won't be needed if we centralize all the state inside the `form` for form inputs
-        let RESET_LOCK = false;
-        // A lookup containing fields or field groups
-        const fieldsByPath = vue.ref({});
+        let FIELD_ID_COUNTER = 0;
         // If the form is currently submitting
         const isSubmitting = vue.ref(false);
         // The number of times the user tried to submit the form
@@ -1596,44 +1651,62 @@
         const fieldArrays = [];
         // a private ref for all form values
         const formValues = vue.reactive(resolveInitialValues(opts));
-        // the source of errors for the form fields
-        const { errorBag, setErrorBag, setFieldErrorBag } = useErrorBag(opts === null || opts === void 0 ? void 0 : opts.initialErrors);
+        const pathStates = vue.ref([]);
+        const extraErrorsBag = vue.ref({});
+        /**
+         * Manually sets an error message on a specific field
+         */
+        function setFieldError(field, message) {
+            const state = findPathState(field);
+            if (!state) {
+                extraErrorsBag.value[field] = normalizeErrorItem(message);
+                return;
+            }
+            state.errors = normalizeErrorItem(message);
+        }
+        /**
+         * Sets errors for the fields specified in the object
+         */
+        function setErrors(paths) {
+            keysOf(paths).forEach(path => {
+                setFieldError(path, paths[path]);
+            });
+        }
+        if (opts === null || opts === void 0 ? void 0 : opts.initialErrors) {
+            setErrors(opts.initialErrors);
+        }
+        const errorBag = vue.computed(() => {
+            const pathErrors = pathStates.value.reduce((acc, state) => {
+                if (state.errors.length) {
+                    acc[state.path] = state.errors;
+                }
+                return acc;
+            }, {});
+            return Object.assign(Object.assign({}, extraErrorsBag.value), pathErrors);
+        });
         // Gets the first error of each field
         const errors = vue.computed(() => {
             return keysOf(errorBag.value).reduce((acc, key) => {
-                const bag = errorBag.value[key];
-                if (bag && bag.length) {
-                    acc[key] = bag[0];
+                const errors = errorBag.value[key];
+                if (errors === null || errors === void 0 ? void 0 : errors.length) {
+                    acc[key] = errors[0];
                 }
                 return acc;
             }, {});
         });
-        function getFirstFieldAtPath(path) {
-            const fieldOrGroup = fieldsByPath.value[path];
-            return Array.isArray(fieldOrGroup) ? fieldOrGroup[0] : fieldOrGroup;
-        }
-        function fieldExists(path) {
-            return !!fieldsByPath.value[path];
-        }
         /**
          * Holds a computed reference to all fields names and labels
          */
         const fieldNames = vue.computed(() => {
-            return keysOf(fieldsByPath.value).reduce((names, path) => {
-                const field = getFirstFieldAtPath(path);
-                if (field) {
-                    names[path] = { name: vue.unref(field.name) || '', label: vue.unref(field.label) || '' };
-                }
+            return pathStates.value.reduce((names, state) => {
+                names[state.path] = { name: state.path || '', label: state.label || '' };
                 return names;
             }, {});
         });
         const fieldBailsMap = vue.computed(() => {
-            return keysOf(fieldsByPath.value).reduce((map, path) => {
+            return pathStates.value.reduce((map, state) => {
                 var _a;
-                const field = getFirstFieldAtPath(path);
-                if (field) {
-                    map[path] = (_a = field.bails) !== null && _a !== void 0 ? _a : true;
-                }
+                map[state.path] = (_a = state.bails) !== null && _a !== void 0 ? _a : true;
                 return map;
             }, {});
         });
@@ -1642,17 +1715,74 @@
         const initialErrors = Object.assign({}, ((opts === null || opts === void 0 ? void 0 : opts.initialErrors) || {}));
         const keepValuesOnUnmount = (_a = opts === null || opts === void 0 ? void 0 : opts.keepValuesOnUnmount) !== null && _a !== void 0 ? _a : false;
         // initial form values
-        const { initialValues, originalInitialValues, setInitialValues } = useFormInitialValues(fieldsByPath, formValues, opts);
+        const { initialValues, originalInitialValues, setInitialValues } = useFormInitialValues(pathStates, formValues, opts);
         // form meta aggregations
-        const meta = useFormMeta(fieldsByPath, formValues, originalInitialValues, errors);
+        const meta = useFormMeta(pathStates, formValues, originalInitialValues, errors);
         const controlledValues = vue.computed(() => {
-            return [...controlledModelPaths, ...keysOf(fieldsByPath.value)].reduce((acc, path) => {
-                const value = getFromPath(formValues, path);
-                setInPath(acc, path, value);
+            return pathStates.value.reduce((acc, state) => {
+                const value = getFromPath(formValues, state.path);
+                setInPath(acc, state.path, value);
                 return acc;
             }, {});
         });
         const schema = opts === null || opts === void 0 ? void 0 : opts.validationSchema;
+        function createPathState(path, config) {
+            var _a, _b;
+            const initialValue = vue.computed(() => getFromPath(initialValues.value, unravel(path)));
+            const pathStateExists = pathStates.value.find(state => state.path === vue.unref(path));
+            if (pathStateExists) {
+                if ((config === null || config === void 0 ? void 0 : config.type) === 'checkbox' || (config === null || config === void 0 ? void 0 : config.type) === 'radio') {
+                    pathStateExists.multiple = true;
+                }
+                if (Array.isArray(pathStateExists.id)) {
+                    pathStateExists.id.push(FIELD_ID_COUNTER++);
+                }
+                else {
+                    pathStateExists.id = [pathStateExists.id, FIELD_ID_COUNTER++];
+                }
+                pathStateExists.fieldsCount++;
+                return pathStateExists;
+            }
+            const currentValue = vue.computed(() => getFromPath(formValues, unravel(path)));
+            const pathValue = unravel(path);
+            const state = vue.reactive({
+                id: FIELD_ID_COUNTER++,
+                path,
+                touched: false,
+                pending: false,
+                valid: true,
+                validated: !!((_a = initialErrors[pathValue]) === null || _a === void 0 ? void 0 : _a.length),
+                initialValue,
+                errors: vue.shallowRef([]),
+                bails: (_b = config === null || config === void 0 ? void 0 : config.bails) !== null && _b !== void 0 ? _b : false,
+                label: config === null || config === void 0 ? void 0 : config.label,
+                type: (config === null || config === void 0 ? void 0 : config.type) || 'default',
+                value: currentValue,
+                multiple: false,
+                fieldsCount: 1,
+                validate: config === null || config === void 0 ? void 0 : config.validate,
+                dirty: vue.computed(() => {
+                    return !isEqual(vue.unref(currentValue), vue.unref(initialValue));
+                }),
+            });
+            pathStates.value.push(state);
+            // if it has errors before, validate it.
+            if (errors.value[pathValue] && !initialErrors[pathValue]) {
+                vue.nextTick(() => {
+                    validateField(pathValue);
+                });
+            }
+            // Handles when a path changes
+            if (vue.isRef(path)) {
+                vue.watch(path, newPath => {
+                    const nextValue = klona(currentValue.value);
+                    vue.nextTick(() => {
+                        setInPath(formValues, newPath, nextValue);
+                    });
+                });
+            }
+            return state;
+        }
         /**
          * Batches validation runs in 5ms batches
          * Must have two distinct batch queues to make sure they don't override each other settings #3783
@@ -1663,17 +1793,17 @@
             return (await mode) === 'silent' ? debouncedSilentValidation() : debouncedValidation();
         }, (formResult, [mode]) => {
             // fields by id lookup
-            const fieldsById = formCtx.fieldsByPath.value || {};
             // errors fields names, we need it to also check if custom errors are updated
             const currentErrorsPaths = keysOf(formCtx.errorBag.value);
             // collect all the keys from the schema and all fields
-            // this ensures we have a complete keymap of all the fields
+            // this ensures we have a complete key map of all the fields
             const paths = [
-                ...new Set([...keysOf(formResult.results), ...keysOf(fieldsById), ...currentErrorsPaths]),
+                ...new Set([...keysOf(formResult.results), ...pathStates.value.map(p => p.path), ...currentErrorsPaths]),
             ];
             // aggregates the paths into a single result object while applying the results on the fields
-            return paths.reduce((validation, path) => {
-                const field = fieldsById[path];
+            return paths.reduce((validation, _path) => {
+                const path = _path;
+                const pathState = findPathState(path);
                 const messages = (formResult.results[path] || { errors: [] }).errors;
                 const fieldResult = {
                     errors: messages,
@@ -1683,24 +1813,37 @@
                 if (!fieldResult.valid) {
                     validation.errors[path] = fieldResult.errors[0];
                 }
+                // clean up extra errors if path state exists
+                if (pathState && extraErrorsBag.value[path]) {
+                    delete extraErrorsBag.value[path];
+                }
                 // field not rendered
-                if (!field) {
+                if (!pathState) {
                     setFieldError(path, messages);
                     return validation;
                 }
                 // always update the valid flag regardless of the mode
-                applyFieldMutation(field, f => (f.meta.valid = fieldResult.valid));
+                pathState.valid = fieldResult.valid;
                 if (mode === 'silent') {
                     return validation;
                 }
-                const wasValidated = Array.isArray(field) ? field.some(f => f.meta.validated) : field.meta.validated;
-                if (mode === 'validated-only' && !wasValidated) {
+                if (mode === 'validated-only' && !pathState.validated) {
                     return validation;
                 }
-                applyFieldMutation(field, f => f.setState({ errors: fieldResult.errors }));
+                setFieldError(pathState, fieldResult.errors);
                 return validation;
             }, { valid: formResult.valid, results: {}, errors: {} });
         });
+        function mutateAllPathState(mutation) {
+            pathStates.value.forEach(mutation);
+        }
+        function findPathState(path) {
+            const pathState = typeof path === 'string' ? pathStates.value.find(state => state.path === path) : path;
+            return pathState;
+        }
+        function unsetPathValue(path) {
+            unsetPath(formValues, path);
+        }
         function makeSubmissionFactory(onlyControlled) {
             return function submitHandlerFactory(fn, onValidationError) {
                 return function submissionHandler(e) {
@@ -1709,10 +1852,7 @@
                         e.stopPropagation();
                     }
                     // Touch all fields
-                    setTouched(keysOf(fieldsByPath.value).reduce((acc, field) => {
-                        acc[field] = true;
-                        return acc;
-                    }, {}));
+                    mutateAllPathState(s => (s.touched = true));
                     isSubmitting.value = true;
                     submitCount.value++;
                     return validate()
@@ -1720,7 +1860,7 @@
                         const values = klona(formValues);
                         if (result.valid && typeof fn === 'function') {
                             const controlled = klona(controlledValues.value);
-                            let submittedValues = onlyControlled ? controlled : values;
+                            let submittedValues = (onlyControlled ? controlled : values);
                             if (result.values) {
                                 submittedValues = result.values;
                             }
@@ -1760,9 +1900,22 @@
         const handleSubmitImpl = makeSubmissionFactory(false);
         const handleSubmit = handleSubmitImpl;
         handleSubmit.withControlled = makeSubmissionFactory(true);
+        function removePathState(path) {
+            const idx = pathStates.value.findIndex(s => s.path === path);
+            const pathState = pathStates.value[idx];
+            if (idx === -1 || !pathState) {
+                return;
+            }
+            if (pathState.multiple && pathState.fieldsCount) {
+                pathState.fieldsCount--;
+            }
+            if (!pathState.multiple || pathState.fieldsCount <= 0) {
+                pathStates.value.splice(idx, 1);
+                unsetInitialValue(path);
+            }
+        }
         const formCtx = {
             formId,
-            fieldsByPath,
             values: formValues,
             controlledValues,
             errorBag,
@@ -1775,14 +1928,11 @@
             keepValuesOnUnmount,
             validateSchema: vue.unref(schema) ? validateSchema : undefined,
             validate,
-            register: registerField,
-            unregister: unregisterField,
-            setFieldErrorBag,
+            setFieldError,
             validateField,
             setFieldValue,
             setValues,
             setErrors,
-            setFieldError,
             setFieldTouched,
             setTouched,
             resetForm,
@@ -1792,102 +1942,63 @@
             unsetInitialValue,
             setFieldInitialValue,
             useFieldModel,
+            createPathState,
+            getPathState: findPathState,
+            unsetPathValue,
+            removePathState,
+            initialValues: initialValues,
+            getAllPathStates: () => pathStates.value,
         };
-        function isFieldGroup(fieldOrGroup) {
-            return Array.isArray(fieldOrGroup);
-        }
-        function applyFieldMutation(fieldOrGroup, mutation) {
-            if (Array.isArray(fieldOrGroup)) {
-                return fieldOrGroup.forEach(mutation);
-            }
-            return mutation(fieldOrGroup);
-        }
-        function mutateAllFields(mutation) {
-            Object.values(fieldsByPath.value).forEach(field => {
-                if (!field) {
-                    return;
-                }
-                // avoid resetting the field values, because they should've been reset already.
-                applyFieldMutation(field, mutation);
-            });
-        }
-        /**
-         * Manually sets an error message on a specific field
-         */
-        function setFieldError(field, message) {
-            setFieldErrorBag(field, message);
-        }
-        /**
-         * Sets errors for the fields specified in the object
-         */
-        function setErrors(fields) {
-            setErrorBag(fields);
-        }
         /**
          * Sets a single field value
          */
-        function setFieldValue(field, value, { force } = { force: false }) {
-            var _a;
-            const fieldInstance = fieldsByPath.value[field];
+        function setFieldValue(field, value) {
             const clonedValue = klona(value);
-            // field wasn't found, create a virtual field as a placeholder
-            if (!fieldInstance) {
-                setInPath(formValues, field, clonedValue);
-                return;
+            const path = typeof field === 'string' ? field : field.path;
+            const pathState = findPathState(path);
+            if (!pathState) {
+                createPathState(path);
             }
-            if (isFieldGroup(fieldInstance) && ((_a = fieldInstance[0]) === null || _a === void 0 ? void 0 : _a.type) === 'checkbox' && !Array.isArray(value)) {
-                // Multiple checkboxes, and only one of them got updated
-                const newValue = klona(resolveNextCheckboxValue(getFromPath(formValues, field) || [], value, undefined));
-                setInPath(formValues, field, newValue);
-                return;
-            }
-            let newValue = clonedValue;
-            // Single Checkbox: toggles the field value unless the field is being reset then force it
-            if (!isFieldGroup(fieldInstance) && fieldInstance.type === 'checkbox' && !force && !RESET_LOCK) {
-                newValue = klona(resolveNextCheckboxValue(getFromPath(formValues, field), value, vue.unref(fieldInstance.uncheckedValue)));
-            }
-            setInPath(formValues, field, newValue);
+            setInPath(formValues, path, clonedValue);
         }
         /**
          * Sets multiple fields values
          */
         function setValues(fields) {
-            // clean up old values
-            keysOf(formValues).forEach(key => {
-                delete formValues[key];
-            });
-            // set up new values
-            keysOf(fields).forEach(path => {
-                setFieldValue(path, fields[path]);
-            });
+            merge(formValues, fields);
             // regenerate the arrays when the form values change
             fieldArrays.forEach(f => f && f.reset());
         }
         function createModel(path) {
-            const { value } = _useFieldValue(path, undefined, formCtx);
-            vue.watch(value, () => {
-                if (!fieldExists(vue.unref(path))) {
-                    validate({ mode: 'validated-only' });
-                }
-            }, {
-                deep: true,
+            const pathState = findPathState(vue.unref(path)) || createPathState(path);
+            return vue.computed({
+                get() {
+                    return pathState.value;
+                },
+                set(value) {
+                    const pathValue = vue.unref(path);
+                    setFieldValue(pathValue, value);
+                    pathState.validated = true;
+                    pathState.pending = true;
+                    validateField(pathValue).then(() => {
+                        pathState.pending = false;
+                    });
+                },
             });
-            controlledModelPaths.add(vue.unref(path));
-            return value;
         }
-        function useFieldModel(path) {
-            if (!Array.isArray(path)) {
-                return createModel(path);
+        function useFieldModel(pathOrPaths) {
+            if (!Array.isArray(pathOrPaths)) {
+                return createModel(pathOrPaths);
             }
-            return path.map(createModel);
+            return pathOrPaths.map(createModel);
         }
         /**
          * Sets the touched meta state on a field
          */
         function setFieldTouched(field, isTouched) {
-            const fieldInstance = fieldsByPath.value[field];
-            if (fieldInstance) {
-                applyFieldMutation(fieldInstance, f => f.setTouched(isTouched));
+            const pathState = findPathState(field);
+            if (pathState) {
+                pathState.touched = isTouched;
             }
         }
         /**
@@ -1899,172 +2010,53 @@
             });
         }
         function resetField(field, state) {
-            const fieldInstance = fieldsByPath.value[field];
-            if (fieldInstance) {
-                applyFieldMutation(fieldInstance, f => f.resetField(state));
-            }
+            var _a;
+            const newValue = state && 'value' in state ? state.value : getFromPath(initialValues.value, field);
+            setFieldInitialValue(field, klona(newValue));
+            setFieldValue(field, newValue);
+            setFieldTouched(field, (_a = state === null || state === void 0 ? void 0 : state.touched) !== null && _a !== void 0 ? _a : false);
+            setFieldError(field, (state === null || state === void 0 ? void 0 : state.errors) || []);
         }
         /**
          * Resets all fields
          */
-        function resetForm(state) {
-            RESET_LOCK = true;
-            // Reset all field states first
-            mutateAllFields(f => f.resetField());
-            // reset values
-            const newValues = (state === null || state === void 0 ? void 0 : state.values) ? state.values : originalInitialValues.value;
+        function resetForm(resetState) {
+            const newValues = (resetState === null || resetState === void 0 ? void 0 : resetState.values) ? resetState.values : originalInitialValues.value;
             setInitialValues(newValues);
             setValues(newValues);
-            if (state === null || state === void 0 ? void 0 : state.touched) {
-                setTouched(state.touched);
-            }
-            setErrors((state === null || state === void 0 ? void 0 : state.errors) || {});
-            submitCount.value = (state === null || state === void 0 ? void 0 : state.submitCount) || 0;
-            vue.nextTick(() => {
-                RESET_LOCK = false;
+            mutateAllPathState(state => {
+                var _a;
+                state.validated = false;
+                state.touched = ((_a = resetState === null || resetState === void 0 ? void 0 : resetState.touched) === null || _a === void 0 ? void 0 : _a[state.path]) || false;
+                setFieldValue(state.path, getFromPath(newValues, state.path));
+                setFieldError(state.path, undefined);
             });
-        }
-        function insertFieldAtPath(field, path) {
-            const rawField = vue.markRaw(field);
-            const fieldPath = path;
-            // first field at that path
-            if (!fieldsByPath.value[fieldPath]) {
-                fieldsByPath.value[fieldPath] = rawField;
-                return;
-            }
-            const fieldAtPath = fieldsByPath.value[fieldPath];
-            if (fieldAtPath && !Array.isArray(fieldAtPath)) {
-                fieldsByPath.value[fieldPath] = [fieldAtPath];
-            }
-            // add the new array to that path
-            fieldsByPath.value[fieldPath] = [...fieldsByPath.value[fieldPath], rawField];
-        }
-        function removeFieldFromPath(field, path) {
-            const fieldPath = path;
-            const fieldAtPath = fieldsByPath.value[fieldPath];
-            if (!fieldAtPath) {
-                return;
-            }
-            // same field at path
-            if (!isFieldGroup(fieldAtPath) && field.id === fieldAtPath.id) {
-                delete fieldsByPath.value[fieldPath];
-                return;
-            }
-            if (isFieldGroup(fieldAtPath)) {
-                const idx = fieldAtPath.findIndex(f => f.id === field.id);
-                if (idx === -1) {
-                    return;
-                }
-                fieldAtPath.splice(idx, 1);
-                if (!fieldAtPath.length) {
-                    delete fieldsByPath.value[fieldPath];
-                }
-            }
-        }
-        function registerField(field) {
-            const fieldPath = vue.unref(field.name);
-            insertFieldAtPath(field, fieldPath);
-            if (vue.isRef(field.name)) {
-                // ensures when a field's name was already taken that it preserves its same value
-                // necessary for fields generated by loops
-                vue.watch(field.name, async (newPath, oldPath) => {
-                    // cache the value
-                    await vue.nextTick();
-                    removeFieldFromPath(field, oldPath);
-                    insertFieldAtPath(field, newPath);
-                    // re-validate if either path had errors before
-                    if (errors.value[oldPath] || errors.value[newPath]) {
-                        // clear up both paths errors
-                        setFieldError(oldPath, undefined);
-                        validateField(newPath);
-                    }
-                    // clean up the old path if no other field is sharing that name
-                    // #3325
-                    await vue.nextTick();
-                    if (!fieldExists(oldPath)) {
-                        unsetPath(formValues, oldPath);
-                    }
-                });
-            }
-            // if field already had errors (initial errors) that's not user-set, validate it again to ensure state is correct
-            // the difference being that `initialErrors` will contain the error message while other errors (pre-validated schema) won't have them as initial errors
-            // #3342
-            const initialErrorMessage = vue.unref(field.errorMessage);
-            if (initialErrorMessage && (initialErrors === null || initialErrors === void 0 ? void 0 : initialErrors[fieldPath]) !== initialErrorMessage) {
-                validateField(fieldPath);
-            }
-            // marks the initial error as "consumed" so it won't be matched later with same non-initial error
-            delete initialErrors[fieldPath];
-        }
-        function unregisterField(field) {
-            const fieldName = vue.unref(field.name);
-            const fieldInstance = fieldsByPath.value[fieldName];
-            const isGroup = !!fieldInstance && isFieldGroup(fieldInstance);
-            removeFieldFromPath(field, fieldName);
-            // clears a field error on unmounted
-            // we wait till next tick to make sure if the field is completely removed and doesn't have any siblings like checkboxes
+            setErrors((resetState === null || resetState === void 0 ? void 0 : resetState.errors) || {});
+            submitCount.value = (resetState === null || resetState === void 0 ? void 0 : resetState.submitCount) || 0;
             vue.nextTick(() => {
-                var _a;
-                const shouldKeepValue = (_a = vue.unref(field.keepValueOnUnmount)) !== null && _a !== void 0 ? _a : vue.unref(keepValuesOnUnmount);
-                const currentGroupValue = getFromPath(formValues, fieldName);
-                // The boolean here is we check if the field still belongs to the same control group with that name
-                // if another group claimed the name, we should avoid handling it since it is no longer the same group
-                // this happens with `v-for` over some checkboxes and field arrays.
-                // also if the group no longer exist we can assume this group was the last one that controlled it
-                const isSameGroup = isGroup && (fieldInstance === fieldsByPath.value[fieldName] || !fieldsByPath.value[fieldName]);
-                // group field that still has a dangling value, the field may exist or not after it was removed.
-                // This used to be handled in the useField composable but the form has better context on when it should/not happen.
-                // if it does belong to it that means the group still exists
-                // #3844
-                if (isSameGroup && !shouldKeepValue) {
-                    if (Array.isArray(currentGroupValue)) {
-                        const valueIdx = currentGroupValue.findIndex(i => isEqual(i, vue.unref(field.checkedValue)));
-                        if (valueIdx > -1) {
-                            const newVal = [...currentGroupValue];
-                            newVal.splice(valueIdx, 1);
-                            setFieldValue(fieldName, newVal, { force: true });
-                        }
-                    }
-                    else if (currentGroupValue === vue.unref(field.checkedValue)) {
-                        // Remove field if it is a group but does not have an array value, like for radio inputs #3963
-                        unsetPath(formValues, fieldName);
-                    }
-                }
-                // Field was removed entirely, we should unset its path
-                // #3384
-                if (!fieldExists(fieldName)) {
-                    setFieldError(fieldName, undefined);
-                    // Checks if the field was configured to be unset during unmount or not
-                    // Checks both the form-level config and field-level one
-                    // Field has the priority if it is set, otherwise it goes to the form settings
-                    if (shouldKeepValue) {
-                        return;
-                    }
-                    // Don't apply emptyContainer check unless the current group value is an array
-                    if (isGroup && Array.isArray(currentGroupValue) && !isEmptyContainer(currentGroupValue)) {
-                        return;
-                    }
-                    unsetPath(formValues, fieldName);
-                }
+                validate({ mode: 'silent' });
             });
         }
         async function validate(opts) {
             const mode = (opts === null || opts === void 0 ? void 0 : opts.mode) || 'force';
             if (mode === 'force') {
-                mutateAllFields(f => (f.meta.validated = true));
+                mutateAllPathState(f => (f.validated = true));
             }
             if (formCtx.validateSchema) {
                 return formCtx.validateSchema(mode);
             }
             // No schema, each field is responsible to validate itself
-            const validations = await Promise.all(Object.values(fieldsByPath.value).map(field => {
-                const fieldInstance = Array.isArray(field) ? field[0] : field;
-                if (!fieldInstance) {
-                    return Promise.resolve({ key: '', valid: true, errors: [] });
+            const validations = await Promise.all(pathStates.value.map(state => {
+                if (!state.validate) {
+                    return Promise.resolve({
+                        key: state.path,
+                        valid: true,
+                        errors: [],
+                    });
                 }
-                return fieldInstance.validate(opts).then((result) => {
+                return state.validate(opts).then((result) => {
                     return {
-                        key: vue.unref(fieldInstance.name),
+                        key: state.path,
                         valid: result.valid,
                         errors: result.errors,
                     };
@@ -2087,16 +2079,22 @@
                 errors,
             };
         }
-        async function validateField(field) {
-            const fieldInstance = fieldsByPath.value[field];
-            if (!fieldInstance) {
-                vue.warn(`field with name ${field} was not found`);
-                return Promise.resolve({ errors: [], valid: true });
+        async function validateField(path) {
+            const state = findPathState(path);
+            if (state) {
+                state.validated = true;
+            }
+            if (schema) {
+                const { results } = await validateSchema('validated-only');
+                return results[path] || { errors: [], valid: true };
             }
-            if (Array.isArray(fieldInstance)) {
-                return fieldInstance.map(f => f.validate())[0];
+            if (state === null || state === void 0 ? void 0 : state.validate) {
+                return state.validate();
             }
-            return fieldInstance.validate();
+            if (!state) {
+                vue.warn(`field with path ${path} was not found`);
+            }
+            return Promise.resolve({ errors: [], valid: true });
         }
         function unsetInitialValue(path) {
             unsetPath(initialValues.value, path);
@@ -2105,8 +2103,8 @@
          * Sneaky function to set initial field values
          */
         function stageInitialValue(path, value, updateOriginal = false) {
-            setInPath(formValues, path, value);
             setFieldInitialValue(path, value);
+            setInPath(formValues, path, value);
             if (updateOriginal && !(opts === null || opts === void 0 ? void 0 : opts.initialValues)) {
                 setInPath(originalInitialValues.value, path, klona(value));
             }
@@ -2159,12 +2157,95 @@
         }
         // Provide injections
         vue.provide(FormContextKey, formCtx);
-        return Object.assign(Object.assign({}, formCtx), { handleReset: () => resetForm(), submitForm });
+        function defineComponentBinds(path, config) {
+            const pathState = findPathState(unravel(path)) || createPathState(path);
+            const evalConfig = () => (isCallable(config) ? config(omit(pathState, PRIVATE_PATH_STATE_KEYS)) : config || {});
+            function onBlur() {
+                var _a;
+                pathState.touched = true;
+                const validateOnBlur = (_a = evalConfig().validateOnBlur) !== null && _a !== void 0 ? _a : getConfig().validateOnBlur;
+                if (validateOnBlur) {
+                    validateField(pathState.path);
+                }
+            }
+            function onUpdateModelValue(value) {
+                var _a;
+                setFieldValue(pathState.path, value);
+                const validateOnModelUpdate = (_a = evalConfig().validateOnModelUpdate) !== null && _a !== void 0 ? _a : getConfig().validateOnModelUpdate;
+                if (validateOnModelUpdate) {
+                    validateField(pathState.path);
+                }
+            }
+            const props = vue.computed(() => {
+                const base = {
+                    modelValue: pathState.value,
+                    'onUpdate:modelValue': onUpdateModelValue,
+                    onBlur,
+                };
+                if (isCallable(config)) {
+                    return Object.assign(Object.assign({}, base), (config(pathState).props || {}));
+                }
+                if (config === null || config === void 0 ? void 0 : config.mapProps) {
+                    return Object.assign(Object.assign({}, base), config.mapProps(omit(pathState, PRIVATE_PATH_STATE_KEYS)));
+                }
+                return base;
+            });
+            return props;
+        }
+        function defineInputBinds(path, config) {
+            const pathState = (findPathState(unravel(path)) || createPathState(path));
+            const evalConfig = () => (isCallable(config) ? config(omit(pathState, PRIVATE_PATH_STATE_KEYS)) : config || {});
+            function onBlur() {
+                var _a;
+                pathState.touched = true;
+                const validateOnBlur = (_a = evalConfig().validateOnBlur) !== null && _a !== void 0 ? _a : getConfig().validateOnBlur;
+                if (validateOnBlur) {
+                    validateField(pathState.path);
+                }
+            }
+            function onInput(e) {
+                var _a;
+                const value = normalizeEventValue(e);
+                setFieldValue(pathState.path, value);
+                const validateOnInput = (_a = evalConfig().validateOnInput) !== null && _a !== void 0 ? _a : getConfig().validateOnInput;
+                if (validateOnInput) {
+                    validateField(pathState.path);
+                }
+            }
+            function onChange(e) {
+                var _a;
+                const value = normalizeEventValue(e);
+                setFieldValue(pathState.path, value);
+                const validateOnChange = (_a = evalConfig().validateOnChange) !== null && _a !== void 0 ? _a : getConfig().validateOnChange;
+                if (validateOnChange) {
+                    validateField(pathState.path);
+                }
+            }
+            const props = vue.computed(() => {
+                const base = {
+                    value: pathState.value,
+                    onChange,
+                    onInput,
+                    onBlur,
+                };
+                if (isCallable(config)) {
+                    return Object.assign(Object.assign({}, base), (config(omit(pathState, PRIVATE_PATH_STATE_KEYS)).attrs || {}));
+                }
+                if (config === null || config === void 0 ? void 0 : config.mapAttrs) {
+                    return Object.assign(Object.assign({}, base), config.mapAttrs(omit(pathState, PRIVATE_PATH_STATE_KEYS)));
+                }
+                return base;
+            });
+            return props;
+        }
+        return Object.assign(Object.assign({}, formCtx), { handleReset: () => resetForm(), submitForm,
+            defineComponentBinds,
+            defineInputBinds });
     }
     /**
      * Manages form meta aggregation
      */
-    function useFormMeta(fieldsByPath, currentValues, initialValues, errors) {
+    function useFormMeta(pathsState, currentValues, initialValues, errors) {
         const MERGE_STRATEGIES = {
             touched: 'some',
             pending: 'some',
@@ -2174,10 +2255,10 @@
             return !isEqual(currentValues, vue.unref(initialValues));
         });
         function calculateFlags() {
-            const fields = Object.values(fieldsByPath.value).flat(1).filter(Boolean);
+            const states = pathsState.value;
             return keysOf(MERGE_STRATEGIES).reduce((acc, flag) => {
                 const mergeMethod = MERGE_STRATEGIES[flag];
-                acc[flag] = fields[mergeMethod](field => field.meta[flag]);
+                acc[flag] = states[mergeMethod](s => s[flag]);
                 return acc;
             }, {});
         }
@@ -2195,7 +2276,7 @@
     /**
      * Manages the initial values prop
      */
-    function useFormInitialValues(fields, formValues, opts) {
+    function useFormInitialValues(pathsState, formValues, opts) {
         const values = resolveInitialValues(opts);
         const providedValues = opts === null || opts === void 0 ? void 0 : opts.initialValues;
         // these are the mutable initial values as the fields are mounted/unmounted
@@ -2216,14 +2297,13 @@
             // those are excluded because it's unlikely you want to change the form values using initial values
             // we mostly watch them for API population or newly inserted fields
             // if the user API is taking too much time before user interaction they should consider disabling or hiding their inputs until the values are ready
-            keysOf(fields.value).forEach(fieldPath => {
-                const field = fields.value[fieldPath];
-                const wasTouched = Array.isArray(field) ? field.some(f => f.meta.touched) : field === null || field === void 0 ? void 0 : field.meta.touched;
-                if (!field || wasTouched) {
+            pathsState.value.forEach(state => {
+                const wasTouched = state.touched;
+                if (wasTouched) {
                     return;
                 }
-                const newValue = getFromPath(initialValues.value, fieldPath);
-                setInPath(formValues, fieldPath, klona(newValue));
+                const newValue = getFromPath(initialValues.value, state.path);
+                setInPath(formValues, state.path, klona(newValue));
             });
         }
         if (vue.isRef(providedValues)) {
@@ -2239,42 +2319,6 @@
             setInitialValues,
         };
     }
-    function useErrorBag(initialErrors) {
-        const errorBag = vue.ref({});
-        function normalizeErrorItem(message) {
-            return Array.isArray(message) ? message : message ? [message] : [];
-        }
-        /**
-         * Manually sets an error message on a specific field
-         */
-        function setFieldErrorBag(field, message) {
-            if (!message) {
-                delete errorBag.value[field];
-                return;
-            }
-            errorBag.value[field] = normalizeErrorItem(message);
-        }
-        /**
-         * Sets errors for the fields specified in the object
-         */
-        function setErrorBag(fields) {
-            errorBag.value = keysOf(fields).reduce((acc, key) => {
-                const message = fields[key];
-                if (message) {
-                    acc[key] = normalizeErrorItem(message);
-                }
-                return acc;
-            }, {});
-        }
-        if (initialErrors) {
-            setErrorBag(initialErrors);
-        }
-        return {
-            errorBag,
-            setErrorBag,
-            setFieldErrorBag,
-        };
-    }
 
     const FormImpl = vue.defineComponent({
         name: 'Form',
@@ -2455,7 +2499,10 @@
         }
         function initFields() {
             const currentValues = getCurrentValues();
-            fields.value = currentValues.map(createEntry);
+            if (!Array.isArray(currentValues)) {
+                return;
+            }
+            fields.value = currentValues.map((v, idx) => createEntry(v, idx, fields.value));
             updateEntryFlags();
         }
         initFields();
@@ -2467,7 +2514,13 @@
                 entry.isLast = i === fieldsLength - 1;
             }
         }
-        function createEntry(value) {
+        function createEntry(value, idx, currentFields) {
+            // Skips the work by returning the current entry if it already exists
+            // This should make the `key` prop stable and doesn't cause more re-renders than needed
+            // The value is computed and should update anyways
+            if (currentFields && !isNullOrUndefined(idx) && currentFields[idx]) {
+                return currentFields[idx];
+            }
             const key = entryCounter++;
             const entry = {
                 key,
@@ -2504,8 +2557,9 @@
             }
             const newValue = [...pathValue];
             newValue.splice(idx, 1);
-            form === null || form === void 0 ? void 0 : form.unsetInitialValue(pathName + `[${idx}]`);
-            form === null || form === void 0 ? void 0 : form.setFieldValue(pathName, newValue);
+            const fieldPath = pathName + `[${idx}]`;
+            form.unsetInitialValue(fieldPath);
+            setInPath(form.values, pathName, newValue);
             fields.value.splice(idx, 1);
             afterMutation();
         }
@@ -2518,8 +2572,8 @@
             }
             const newValue = [...normalizedPathValue];
             newValue.push(value);
-            form === null || form === void 0 ? void 0 : form.stageInitialValue(pathName + `[${newValue.length - 1}]`, value);
-            form === null || form === void 0 ? void 0 : form.setFieldValue(pathName, newValue);
+            form.stageInitialValue(pathName + `[${newValue.length - 1}]`, value);
+            setInPath(form.values, pathName, newValue);
             fields.value.push(createEntry(value));
             afterMutation();
         }
@@ -2538,7 +2592,7 @@
             const tempEntry = newFields[indexA];
             newFields[indexA] = newFields[indexB];
             newFields[indexB] = tempEntry;
-            form === null || form === void 0 ? void 0 : form.setFieldValue(pathName, newValue);
+            setInPath(form.values, pathName, newValue);
             fields.value = newFields;
             updateEntryFlags();
         }
@@ -2552,13 +2606,14 @@
             const newFields = [...fields.value];
             newValue.splice(idx, 0, value);
             newFields.splice(idx, 0, createEntry(value));
-            form === null || form === void 0 ? void 0 : form.setFieldValue(pathName, newValue);
+            setInPath(form.values, pathName, newValue);
             fields.value = newFields;
             afterMutation();
         }
         function replace(arr) {
             const pathName = vue.unref(arrayPath);
-            form === null || form === void 0 ? void 0 : form.setFieldValue(pathName, arr);
+            form.stageInitialValue(pathName, arr);
+            setInPath(form.values, pathName, arr);
             initFields();
             afterMutation();
         }
@@ -2568,7 +2623,7 @@
             if (!Array.isArray(pathValue) || pathValue.length - 1 < idx) {
                 return;
             }
-            form === null || form === void 0 ? void 0 : form.setFieldValue(`${pathName}[${idx}]`, value);
+            setInPath(form.values, `${pathName}[${idx}]`, value);
             form === null || form === void 0 ? void 0 : form.validate({ mode: 'validated-only' });
         }
         function prepend(value) {
@@ -2579,8 +2634,8 @@
                 return;
             }
             const newValue = [value, ...normalizedPathValue];
-            form === null || form === void 0 ? void 0 : form.stageInitialValue(pathName + `[${newValue.length - 1}]`, value);
-            form === null || form === void 0 ? void 0 : form.setFieldValue(pathName, newValue);
+            form.stageInitialValue(pathName + `[${newValue.length - 1}]`, value);
+            setInPath(form.values, pathName, newValue);
             fields.value.unshift(createEntry(value));
             afterMutation();
         }
@@ -2598,7 +2653,7 @@
             const movedValue = newValue[oldIdx];
             newValue.splice(oldIdx, 1);
             newValue.splice(newIdx, 0, movedValue);
-            form === null || form === void 0 ? void 0 : form.setFieldValue(pathName, newValue);
+            setInPath(form.values, pathName, newValue);
             fields.value = newFields;
             afterMutation();
         }
@@ -2737,17 +2792,13 @@
      * If a field is dirty or not
      */
     function useIsFieldDirty(path) {
-        const form = injectWithSelf(FormContextKey);
-        let field = path ? undefined : vue.inject(FieldContextKey);
+        const fieldOrPath = resolveFieldOrPathState(path);
         return vue.computed(() => {
-            if (path) {
-                field = normalizeField(form === null || form === void 0 ? void 0 : form.fieldsByPath.value[vue.unref(path)]);
-            }
-            if (!field) {
-                warn(`field with name ${vue.unref(path)} was not found`);
+            var _a, _b;
+            if (!fieldOrPath) {
                 return false;
             }
-            return field.meta.dirty;
+            return (_b = ('meta' in fieldOrPath ? fieldOrPath.meta.dirty : (_a = fieldOrPath === null || fieldOrPath === void 0 ? void 0 : fieldOrPath.value) === null || _a === void 0 ? void 0 : _a.dirty)) !== null && _b !== void 0 ? _b : false;
         });
     }
 
@@ -2755,17 +2806,13 @@
      * If a field is touched or not
      */
     function useIsFieldTouched(path) {
-        const form = injectWithSelf(FormContextKey);
-        let field = path ? undefined : vue.inject(FieldContextKey);
+        const fieldOrPath = resolveFieldOrPathState(path);
         return vue.computed(() => {
-            if (path) {
-                field = normalizeField(form === null || form === void 0 ? void 0 : form.fieldsByPath.value[vue.unref(path)]);
-            }
-            if (!field) {
-                warn(`field with name ${vue.unref(path)} was not found`);
+            var _a, _b;
+            if (!fieldOrPath) {
                 return false;
             }
-            return field.meta.touched;
+            return (_b = ('meta' in fieldOrPath ? fieldOrPath.meta.touched : (_a = fieldOrPath === null || fieldOrPath === void 0 ? void 0 : fieldOrPath.value) === null || _a === void 0 ? void 0 : _a.touched)) !== null && _b !== void 0 ? _b : false;
         });
     }
 
@@ -2773,17 +2820,13 @@
      * If a field is validated and is valid
      */
     function useIsFieldValid(path) {
-        const form = injectWithSelf(FormContextKey);
-        let field = path ? undefined : vue.inject(FieldContextKey);
+        const fieldOrPath = resolveFieldOrPathState(path);
         return vue.computed(() => {
-            if (path) {
-                field = normalizeField(form === null || form === void 0 ? void 0 : form.fieldsByPath.value[vue.unref(path)]);
-            }
-            if (!field) {
-                warn(`field with name ${vue.unref(path)} was not found`);
+            var _a, _b;
+            if (!fieldOrPath) {
                 return false;
             }
-            return field.meta.valid;
+            return (_b = ('meta' in fieldOrPath ? fieldOrPath.meta.valid : (_a = fieldOrPath === null || fieldOrPath === void 0 ? void 0 : fieldOrPath.value) === null || _a === void 0 ? void 0 : _a.valid)) !== null && _b !== void 0 ? _b : false;
         });
     }
 
@@ -2806,19 +2849,19 @@
      */
     function useValidateField(path) {
         const form = injectWithSelf(FormContextKey);
-        let field = path ? undefined : vue.inject(FieldContextKey);
+        const field = path ? undefined : vue.inject(FieldContextKey);
         return function validateField() {
-            if (path) {
-                field = normalizeField(form === null || form === void 0 ? void 0 : form.fieldsByPath.value[vue.unref(path)]);
+            if (field) {
+                return field.validate();
             }
-            if (!field) {
-                warn(`field with name ${vue.unref(path)} was not found`);
-                return Promise.resolve({
-                    errors: [],
-                    valid: true,
-                });
+            if (form && path) {
+                return form === null || form === void 0 ? void 0 : form.validateField(vue.unref(path));
             }
-            return field.validate();
+            warn(`field with name ${vue.unref(path)} was not found`);
+            return Promise.resolve({
+                errors: [],
+                valid: true,
+            });
         };
     }