@teamnovu/kit-vue-forms 0.1.11 → 0.1.13

package/dist/index.js

@@ -1,54 +1,54 @@
-var T = Object.defineProperty;
-var G = (t, e, r) => e in t ? T(t, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : t[e] = r;
-var w = (t, e, r) => G(t, typeof e != "symbol" ? e + "" : e, r);
-import { toValue as L, toRaw as Z, computed as d, unref as f, isRef as O, ref as j, watch as E, reactive as D, toRefs as W, shallowReactive as q, toRef as _, onScopeDispose as H, getCurrentScope as Q, onBeforeUnmount as X, defineComponent as $, renderSlot as A, normalizeProps as k, guardReactiveProps as B, resolveComponent as Y, createBlock as C, openBlock as M, withCtx as z, resolveDynamicComponent as x, mergeProps as ee } from "vue";
-import { cloneDeep as re } from "lodash-es";
+var G = Object.defineProperty;
+var L = (t, e, r) => e in t ? G(t, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : t[e] = r;
+var w = (t, e, r) => L(t, typeof e != "symbol" ? e + "" : e, r);
+import { toValue as Z, toRaw as q, computed as u, unref as f, isRef as j, shallowRef as _, reactive as D, watch as F, toRefs as W, shallowReactive as H, toRef as S, onScopeDispose as Q, watchEffect as X, triggerRef as Y, ref as k, getCurrentScope as x, onBeforeUnmount as ee, defineComponent as $, renderSlot as C, normalizeProps as B, guardReactiveProps as I, resolveComponent as re, createBlock as A, openBlock as M, withCtx as z, resolveDynamicComponent as te, mergeProps as se } from "vue";
+import { cloneDeep as ae } from "lodash-es";
 import "zod";
-function g(t) {
-  const e = L(t), r = Z(e);
-  return re(r);
+function y(t) {
+  const e = Z(t), r = q(e);
+  return ae(r);
 }
-function I(t) {
+function K(t) {
   return t === "" ? [] : t.split(/\s*\.\s*/).filter(Boolean);
 }
 function P(t, e) {
-  return (Array.isArray(e) ? e : I(e)).reduce(
-    (s, o) => s == null ? void 0 : s[o],
+  return (Array.isArray(e) ? e : K(e)).reduce(
+    (s, i) => s == null ? void 0 : s[i],
     t
   );
 }
-function te(t, e, r) {
-  const s = Array.isArray(e) ? e : I(e), o = s.at(-1);
-  if (o) {
-    const i = s.slice(0, -1).reduce(
-      (h, v) => h[v],
+function ie(t, e, r) {
+  const s = Array.isArray(e) ? e : K(e), i = s.at(-1);
+  if (i) {
+    const o = s.slice(0, -1).reduce(
+      (p, v) => p == null ? void 0 : p[v],
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       f(t)
     );
-    i[o] = r;
+    o[i] = r;
   } else {
-    if (!O(t))
+    if (!j(t))
       return;
     t.value = r;
   }
 }
-const K = (t, e) => d({
+const U = (t, e) => u({
   get() {
     return P(f(t), f(e));
   },
   set(r) {
-    te(t, f(e), r);
+    ie(t, f(e), r);
   }
 });
 function R(t, e) {
   return !t && !e ? "" : !t && e ? e : !e && t ? t : `${t}.${e}`;
 }
-function se(t, e) {
+function oe(t, e) {
   if (!e)
     return t;
   const r = `${e}.`, s = Object.fromEntries(
-    Object.entries(t.propertyErrors).filter(([o]) => o.startsWith(r)).map(
-      ([o, i]) => [o.slice(r.length), i]
+    Object.entries(t.propertyErrors).filter(([i]) => i.startsWith(r)).map(
+      ([i, o]) => [i.slice(r.length), o]
     )
   );
   return {
@@ -57,7 +57,7 @@ function se(t, e) {
     propertyErrors: s
   };
 }
-class ae {
+class ne {
   constructor(e) {
     w(this, "rc", 1);
     this.drop = e;
@@ -69,31 +69,32 @@ class ae {
     this.rc > 0 && (this.rc -= 1, this.rc === 0 && this.drop && this.drop());
   }
 }
-function oe(t) {
-  const e = j(Object.freeze(g(t.initialValue)));
-  E(
-    () => f(t.initialValue),
-    (u) => {
-      e.value = Object.freeze(g(u));
-    }
-  );
-  const r = D({
+function le(t) {
+  const e = _(Object.freeze(y(t.initialValue))), r = D({
     value: t.value,
     path: t.path,
     initialValue: e,
     errors: t.errors,
     touched: !1
-  }), s = d(() => JSON.stringify(r.value) !== JSON.stringify(r.initialValue)), o = (u) => {
-    r.value = u;
-  }, i = () => {
+  });
+  F(
+    _(t.initialValue),
+    () => {
+      e.value = Object.freeze(y(t.initialValue)), r.value = y(t.initialValue);
+    },
+    { flush: "sync" }
+  );
+  const s = u(() => JSON.stringify(r.value) !== JSON.stringify(r.initialValue)), i = (d) => {
+    r.value = d;
+  }, o = () => {
     r.touched = !0;
-  }, h = () => {
+  }, p = () => {
   }, v = () => {
-    r.value = g(r.initialValue), r.touched = !1, r.errors = [];
-  }, V = (u) => {
-    s.value || o(g(u)), r.initialValue = u;
-  }, n = (u) => {
-    r.errors = u;
+    r.value = y(r.initialValue), r.touched = !1, r.errors = [];
+  }, V = (d) => {
+    s.value || i(y(d)), r.initialValue = d;
+  }, n = (d) => {
+    r.errors = d;
   }, a = () => {
     r.errors = [];
   }, c = W(r);
@@ -104,70 +105,81 @@ function oe(t) {
     errors: c.errors,
     touched: c.touched,
     dirty: s,
-    setData: o,
+    setData: i,
     setInitialData: V,
-    onBlur: i,
-    onFocus: h,
+    onBlur: o,
+    onFocus: p,
     reset: v,
     setErrors: n,
     clearErrors: a
   };
 }
-function ie(t, e) {
-  const r = /* @__PURE__ */ new Map(), s = q(/* @__PURE__ */ new Map()), o = (a) => {
+function ce(t) {
+  const e = _(t());
+  return X(
+    () => {
+      e.value = t(), Y(e);
+    },
+    { flush: "sync" }
+  ), e;
+}
+function ue(t, e) {
+  const r = /* @__PURE__ */ new Map(), s = H(/* @__PURE__ */ new Map()), i = (a) => {
     const c = f(a.path);
     s.set(c, a);
-  }, i = (a) => {
+  }, o = (a) => {
     s.delete(a);
-  }, h = (a) => {
+  }, p = (a) => {
     var c;
-    r.has(a) ? (c = r.get(a)) == null || c.inc() : r.set(a, new ae(() => i(a)));
+    r.has(a) ? (c = r.get(a)) == null || c.inc() : r.set(a, new ne(() => o(a)));
   }, v = (a) => {
     var c;
     r.has(a) && ((c = r.get(a)) == null || c.dec());
   }, V = (a) => {
     if (!s.has(a)) {
-      const u = oe({
+      const d = le({
         path: a,
-        value: K(_(t, "data"), a),
-        initialValue: d(() => P(t.initialData, a)),
-        errors: d({
+        value: U(S(t, "data"), a),
+        initialValue: ce(
+          () => P(t.initialData, a)
+        ),
+        errors: u({
           get() {
             return e.errors.value.propertyErrors[a] || [];
           },
-          set(F) {
-            e.errors.value.propertyErrors[a] = F;
+          set(E) {
+            e.errors.value.propertyErrors[a] = E;
           }
         })
       });
-      o(u);
+      i(d);
     }
     const c = s.get(a);
-    return h(a), H(() => {
+    return p(a), Q(() => {
       v(a);
     }), c;
   }, n = (a) => V(a.path);
   return {
-    fields: d(() => [...s.values()]),
+    fields: u(() => [...s.values()]),
     getField: V,
-    registerField: o,
-    deregisterField: i,
+    registerField: i,
+    deregisterField: o,
     defineField: n
   };
 }
-function ne(t) {
-  const e = d(() => t.fields.value.some((s) => f(s.dirty))), r = d(() => t.fields.value.some((s) => f(s.touched)));
+function de(t) {
+  const e = u(() => t.fields.value.some((s) => f(s.dirty))), r = u(() => t.fields.value.some((s) => f(s.touched)));
   return {
     isDirty: e,
     isTouched: r
   };
 }
-function le(t) {
+function fe(t) {
   return t.filter(
     (e, r, s) => s.indexOf(e) === r
   );
 }
-function U(...t) {
+function J(...t) {
   return t.slice(1).reduce((e, r) => {
     if (!e && !r)
       return;
@@ -176,20 +188,20 @@ function U(...t) {
       return r;
     if (!s)
       return e;
-    const o = (e ?? []).concat(r);
-    return le(o);
+    const i = (e ?? []).concat(r);
+    return fe(i);
   }, t[0]);
 }
-function ce(...t) {
+function pe(...t) {
   return t.map((r) => Object.keys(r)).flat().reduce((r, s) => {
-    const o = t.map((i) => i[s]).filter(Boolean);
+    const i = t.map((o) => o[s]).filter(Boolean);
     return {
       ...r,
-      [s]: U(...o)
+      [s]: J(...i)
     };
   }, {});
 }
-function S(...t) {
+function b(...t) {
   if (!t.length)
     return {
       general: [],
@@ -198,23 +210,23 @@ function S(...t) {
   const e = t[0];
   return t.length === 1 ? e : t.slice(1).reduce(
     (r, s) => ({
-      general: U(r.general, s.general),
-      propertyErrors: ce(r.propertyErrors ?? {}, s.propertyErrors ?? {})
+      general: J(r.general, s.general),
+      propertyErrors: pe(r.propertyErrors ?? {}, s.propertyErrors ?? {})
     }),
     e
   );
 }
 function N(t) {
   var s;
-  const e = (((s = t.general) == null ? void 0 : s.length) ?? 0) > 0, r = Object.entries(t.propertyErrors).filter(([, o]) => o == null ? void 0 : o.length).length > 0;
+  const e = (((s = t.general) == null ? void 0 : s.length) ?? 0) > 0, r = Object.entries(t.propertyErrors).filter(([, i]) => i == null ? void 0 : i.length).length > 0;
   return e || r;
 }
-function ue(t) {
-  const e = t.issues.filter((s) => s.path.length === 0).map((s) => s.message), r = t.issues.filter((s) => s.path.length > 0).reduce((s, o) => {
-    const i = o.path.join(".");
+function he(t) {
+  const e = t.issues.filter((s) => s.path.length === 0).map((s) => s.message), r = t.issues.filter((s) => s.path.length > 0).reduce((s, i) => {
+    const o = i.path.join(".");
     return {
       ...s,
-      [i]: [...s[i] ?? [], o.message]
+      [o]: [...s[o] ?? [], i.message]
     };
   }, {});
   return {
@@ -229,7 +241,7 @@ const m = {
     propertyErrors: {}
   }
 };
-class de {
+class ve {
   constructor(e) {
     this.schema = e;
   }
@@ -239,7 +251,7 @@ class de {
     const r = await this.schema.safeParseAsync(e);
     if (r.success)
       return m;
-    const s = ue(r.error);
+    const s = he(r.error);
     return {
       isValid: !1,
       errors: {
@@ -249,7 +261,7 @@ class de {
     };
   }
 }
-class fe {
+class me {
   constructor(e) {
     this.validateFn = e;
   }
@@ -270,11 +282,11 @@ class fe {
     }
   }
 }
-class pe {
+class Ve {
   constructor(e, r) {
     w(this, "schemaValidator");
     w(this, "functionValidator");
-    this.schema = e, this.validateFn = r, this.schemaValidator = new de(this.schema), this.functionValidator = new fe(this.validateFn);
+    this.schema = e, this.validateFn = r, this.schemaValidator = new ve(this.schema), this.functionValidator = new me(this.validateFn);
   }
   async validate(e) {
     const [r, s] = await Promise.all([
@@ -283,84 +295,84 @@ class pe {
     ]);
     return {
       isValid: r.isValid && s.isValid,
-      errors: S(r.errors, s.errors)
+      errors: b(r.errors, s.errors)
     };
   }
 }
-function b(t) {
-  return d(() => new pe(
+function O(t) {
+  return u(() => new Ve(
     f(t.schema),
     f(t.validateFn)
   ));
 }
-function he(t, e) {
+function ye(t, e) {
   const r = D({
-    validators: j([b(e)]),
+    validators: k([O(e)]),
     isValidated: !1,
     errors: f(e.errors) ?? m.errors
   }), s = (n = m.errors) => {
-    r.errors = S(f(e.errors) ?? m.errors, n);
+    r.errors = b(f(e.errors) ?? m.errors, n);
   };
-  E(() => f(e.errors), async () => {
+  F(() => f(e.errors), async () => {
     if (r.isValidated) {
-      const n = await i();
+      const n = await o();
       s(n.errors);
     } else
       s();
-  }, { immediate: !0 }), E(
+  }, { immediate: !0 }), F(
     [() => r.validators],
     async (n) => {
       if (r.isValidated)
         if (n) {
-          const a = await i();
+          const a = await o();
           r.errors = a.errors;
         } else
           r.errors = m.errors;
     },
     { immediate: !0 }
-  ), E(() => t.data, () => {
-    r.isValidated && h();
+  ), F(() => t.data, () => {
+    r.isValidated && p();
   });
-  const o = (n) => {
-    const a = O(n) ? n : b(n);
-    return r.validators.push(a), Q() && X(() => {
+  const i = (n) => {
+    const a = j(n) ? n : O(n);
+    return r.validators.push(a), x() && ee(() => {
       r.validators = r.validators.filter(
         (c) => c !== a
       );
     }), a;
   };
-  async function i() {
+  async function o() {
     const n = await Promise.all(
-      r.validators.filter((u) => f(u) !== void 0).map((u) => f(u).validate(t.data))
-    ), a = n.every((u) => u.isValid);
+      r.validators.filter((d) => f(d) !== void 0).map((d) => f(d).validate(t.data))
+    ), a = n.every((d) => d.isValid);
     let { errors: c } = m;
     if (!a) {
-      const u = n.map((F) => F.errors);
-      c = S(...u);
+      const d = n.map((E) => E.errors);
+      c = b(...d);
     }
     return {
       errors: c,
       isValid: a
     };
   }
-  const h = async () => {
-    const n = await i();
+  const p = async () => {
+    const n = await o();
     return s(n.errors), r.isValidated = !0, {
       isValid: !N(n.errors),
       errors: r.errors
     };
-  }, v = d(() => !N(r.errors)), V = () => {
+  }, v = u(() => !N(r.errors)), V = () => {
     r.isValidated = !1, r.errors = f(e.errors) ?? m.errors;
   };
   return {
     ...W(r),
-    validateForm: h,
-    defineValidator: o,
+    validateForm: p,
+    defineValidator: i,
     isValid: v,
     reset: V
   };
 }
-class ve {
+class ge {
   constructor(e, r) {
     this.path = e, this.validator = r;
   }
@@ -374,94 +386,94 @@ class ve {
       errors: {
         general: s.errors.general || [],
         propertyErrors: s.errors.propertyErrors ? Object.fromEntries(
-          Object.entries(s.errors.propertyErrors).map(([o, i]) => [
-            R(this.path, o),
-            i
+          Object.entries(s.errors.propertyErrors).map(([i, o]) => [
+            R(this.path, i),
+            o
           ])
         ) : {}
       }
     };
   }
 }
-function me(t, e, r) {
-  const s = K(t.data, e), o = d(() => P(t.initialData.value, e)), i = (l) => ({
+function Ee(t, e, r) {
+  const s = U(t.data, e), i = u(() => P(t.initialData.value, e)), o = (l) => ({
     ...l,
-    path: d(() => f(l.path).replace(e + ".", "")),
-    setData: (p) => {
-      l.setData(p);
+    path: u(() => f(l.path).replace(e + ".", "")),
+    setData: (h) => {
+      l.setData(h);
     }
-  }), h = (l) => {
-    const p = R(e, l), y = t.getField(p);
-    return y ? i(y) : {};
+  }), p = (l) => {
+    const h = R(e, l), g = t.getField(h);
+    return g ? o(g) : {};
   }, v = (l) => {
-    const p = R(e, l.path), y = t.defineField({
+    const h = R(e, l.path), g = t.defineField({
       ...l,
-      path: p
+      path: h
     });
-    return i(y);
-  }, V = d(() => t.fields.value.filter((l) => {
-    const p = l.path.value;
-    return p.startsWith(e + ".") || p === e;
-  }).map((l) => i(l))), n = () => t.fields.value.filter((l) => {
-    const p = l.path.value;
-    return p.startsWith(e + ".") || p === e;
-  }), a = d(() => n().some((l) => l.dirty.value)), c = d(() => n().some((l) => l.touched.value)), u = d(() => t.isValid.value), F = d(() => t.isValidated.value), J = d(() => se(f(t.errors), e));
+    return o(g);
+  }, V = u(() => t.fields.value.filter((l) => {
+    const h = l.path.value;
+    return h.startsWith(e + ".") || h === e;
+  }).map((l) => o(l))), n = () => t.fields.value.filter((l) => {
+    const h = l.path.value;
+    return h.startsWith(e + ".") || h === e;
+  }), a = u(() => n().some((l) => l.dirty.value)), c = u(() => n().some((l) => l.touched.value)), d = u(() => t.isValid.value), E = u(() => t.isValidated.value), T = u(() => oe(f(t.errors), e));
   return {
     data: s,
     fields: V,
-    initialData: o,
+    initialData: i,
     defineField: v,
-    getField: h,
+    getField: p,
     isDirty: a,
     isTouched: c,
-    isValid: u,
-    isValidated: F,
-    errors: J,
+    isValid: d,
+    isValidated: E,
+    errors: T,
     defineValidator: (l) => {
-      const p = O(l) ? l : b(l), y = d(
-        () => new ve(e, f(p))
+      const h = j(l) ? l : O(l), g = u(
+        () => new ge(e, f(h))
       );
-      return t.defineValidator(y), p;
+      return t.defineValidator(g), h;
     },
     reset: () => n().forEach((l) => l.reset()),
     validateForm: () => t.validateForm(),
-    getSubForm: (l, p) => {
-      const y = R(e, l);
+    getSubForm: (l, h) => {
+      const g = R(e, l);
       return t.getSubForm(
-        y,
-        p
+        g,
+        h
       );
     }
   };
 }
-function Pe(t) {
-  const e = d(() => Object.freeze(g(t.initialData))), r = j(g(e)), s = D({
+function Oe(t) {
+  const e = u(() => Object.freeze(y(t.initialData))), r = k(y(e)), s = D({
     initialData: e,
     data: r
   });
-  E(e, (a) => {
-    s.data = g(a);
-  });
-  const o = he(s, t), i = ie(s, o), h = ne(i), v = () => {
-    r.value = g(e), o.reset(), i.fields.value.forEach(
+  F(e, (a) => {
+    s.data = y(a);
+  }, { flush: "sync" });
+  const i = ye(s, t), o = ue(s, i), p = de(o), v = () => {
+    r.value = y(e), i.reset(), o.fields.value.forEach(
       (a) => a.reset()
     );
   };
   function V(a, c) {
-    return me(n, a);
+    return Ee(n, a);
   }
   const n = {
-    ...i,
     ...o,
-    ...h,
+    ...i,
+    ...p,
     reset: v,
     getSubForm: V,
-    initialData: _(s, "initialData"),
-    data: _(s, "data")
+    initialData: S(s, "initialData"),
+    data: S(s, "data")
   };
   return n;
 }
-const _e = /* @__PURE__ */ $({
+const je = /* @__PURE__ */ $({
   __name: "Field",
   props: {
     form: {},
@@ -474,9 +486,9 @@ const _e = /* @__PURE__ */ $({
     const e = t, r = e.form.defineField({
       path: e.path
     }), s = D(r);
-    return (o, i) => A(o.$slots, "default", k(B(s)));
+    return (i, o) => C(i.$slots, "default", B(I(s)));
   }
-}), Se = /* @__PURE__ */ $({
+}), $e = /* @__PURE__ */ $({
   inheritAttrs: !1,
   __name: "FormFieldWrapper",
   props: {
@@ -487,20 +499,20 @@ const _e = /* @__PURE__ */ $({
   },
   setup(t) {
     return (e, r) => {
-      const s = Y("Field");
-      return M(), C(s, {
+      const s = re("Field");
+      return M(), A(s, {
         form: e.form,
         path: e.path
       }, {
-        default: z(({ errors: o, data: i, setData: h }) => [
-          (M(), C(x(e.component), ee({ ...e.componentProps, ...e.$attrs }, {
-            "model-value": i,
-            errors: o,
+        default: z(({ errors: i, data: o, setData: p }) => [
+          (M(), A(te(e.component), se({ ...e.componentProps, ...e.$attrs }, {
+            "model-value": o,
+            errors: i,
             name: e.path,
-            "onUpdate:modelValue": h
+            "onUpdate:modelValue": p
           }), {
             default: z(() => [
-              A(e.$slots, "default")
+              C(e.$slots, "default")
             ]),
             _: 2
           }, 1040, ["model-value", "errors", "name", "onUpdate:modelValue"]))
@@ -509,20 +521,20 @@ const _e = /* @__PURE__ */ $({
       }, 8, ["form", "path"]);
     };
   }
-}), be = /* @__PURE__ */ $({
+}), Ce = /* @__PURE__ */ $({
   __name: "FormPart",
   props: {
     form: {},
     path: {}
   },
   setup(t) {
-    const e = t, r = d(() => e.form.getSubForm(e.path));
-    return (s, o) => A(s.$slots, "default", k(B({ subform: r.value })));
+    const e = t, r = u(() => e.form.getSubForm(e.path));
+    return (s, i) => C(s.$slots, "default", B(I({ subform: r.value })));
   }
 });
 export {
-  _e as Field,
-  Se as FormFieldWrapper,
-  be as FormPart,
-  Pe as useForm
+  je as Field,
+  $e as FormFieldWrapper,
+  Ce as FormPart,
+  Oe as useForm
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamnovu/kit-vue-forms",
-  "version": "0.1.11",
+  "version": "0.1.13",
   "description": "",
   "main": "dist/index.js",
   "type": "module",

package/src/composables/useField.ts

@@ -1,4 +1,4 @@
-import { computed, reactive, ref, toRefs, unref, watch, type MaybeRef, type MaybeRefOrGetter, type Ref, type WritableComputedRef } from 'vue'
+import { computed, reactive, shallowRef, toRefs, watch, type MaybeRef, type MaybeRefOrGetter, type Ref, type WritableComputedRef } from 'vue'
 import type { FormField } from '../types/form'
 import type { ValidationErrorMessage, ValidationErrors } from '../types/validation'
 import { cloneRefValue } from '../utils/general'
@@ -11,14 +11,7 @@ export interface UseFieldOptions<T, K extends string> {
 }
 
 export function useField<T, K extends string>(options: UseFieldOptions<T, K>): FormField<T, K> {
-  const initialValue = ref(Object.freeze(cloneRefValue(options.initialValue))) as Ref<Readonly<T | undefined>>
-
-  watch(
-    () => unref(options.initialValue),
-    (newInitialValue) => {
-      initialValue.value = Object.freeze(cloneRefValue(newInitialValue))
-    },
-  )
+  const initialValue = shallowRef(Object.freeze(cloneRefValue(options.initialValue))) as Ref<Readonly<T | undefined>>
 
   const state = reactive({
     value: options.value,
@@ -28,6 +21,15 @@ export function useField<T, K extends string>(options: UseFieldOptions<T, K>): F
     touched: false,
   })
 
+  watch(
+    shallowRef(options.initialValue),
+    () => {
+      initialValue.value = Object.freeze(cloneRefValue(options.initialValue))
+      state.value = cloneRefValue(options.initialValue)
+    },
+    { flush: 'sync' },
+  )
+
   const dirty = computed(() => {
     return JSON.stringify(state.value) !== JSON.stringify(state.initialValue)
   })

package/src/composables/useFieldRegistry.ts

@@ -1,4 +1,4 @@
-import { computed, onScopeDispose, shallowReactive, toRef, unref } from 'vue'
+import { computed, onScopeDispose, shallowReactive, shallowRef, toRef, triggerRef, unref, watch, watchEffect, type MaybeRef, type WatchSource } from 'vue'
 import type { FieldsTuple, FormDataDefault, FormField } from '../types/form'
 import type { Paths, PickProps } from '../types/util'
 import { getLens, getNestedValue } from '../utils/path'
@@ -18,6 +18,22 @@ interface FormState<T extends FormDataDefault, TIn extends FormDataDefault = T>
   initialData: TIn
 }
 
+// A computed that always reflects the latest value from the getter
+// This computed forces updates even if the value is the same (to trigger watchers)
+function alwaysComputed<T>(getter: () => T) {
+  const initialValueRef = shallowRef(getter())
+
+  watchEffect(
+    () => {
+      initialValueRef.value = getter()
+      triggerRef(initialValueRef)
+    },
+    { flush: 'sync' },
+  )
+
+  return initialValueRef
+}
+
 export function useFieldRegistry<T extends FormDataDefault>(
   formState: FormState<T>,
   validationState: ValidationState<T>,
@@ -53,7 +69,9 @@ export function useFieldRegistry<T extends FormDataDefault>(
       const field = useField({
         path,
         value: getLens(toRef(formState, 'data'), path),
-        initialValue: computed(() => getNestedValue(formState.initialData, path)),
+        initialValue: alwaysComputed(
+          () => getNestedValue(formState.initialData, path),
+        ),
         errors: computed({
           get() {
             return validationState.errors.value.propertyErrors[path] || []

package/src/composables/useForm.ts

@@ -28,7 +28,7 @@ export function useForm<T extends FormDataDefault>(options: UseFormOptions<T>) {
 
   watch(initialData, (newValue) => {
     state.data = cloneRefValue(newValue)
-  })
+  }, { flush: 'sync' })
 
   const validationState = useValidation(state, options)
   const fieldRegistry = useFieldRegistry(state, validationState)

package/src/utils/path.ts

@@ -33,7 +33,7 @@ export function setNestedValue<T, K extends Paths<T>>(obj: MaybeRef<T>, path: K
     const target = keys
       .slice(0, -1)
       .reduce(
-        (current, key) => current[key],
+        (current, key) => current?.[key],
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         unref(obj) as Record<string, any>,
       )

package/tests/useForm.test.ts

@@ -290,4 +290,70 @@ describe('useForm', () => {
 
     expect(form.fields.value.length).toBe(0)
   })
+
+  it('it should take over the new initial data from the form', { timeout: 500 }, async () => {
+    const initialData = ref({
+      name: 'foo',
+    })
+
+    const form = useForm({
+      initialData,
+    })
+
+    const nameField = form.getField('name')
+
+    expect(form.isDirty.value).toBe(false)
+    expect(nameField.dirty.value).toBe(false)
+
+    nameField.setData('modified')
+
+    expect(form.isDirty.value).toBe(true)
+    expect(nameField.dirty.value).toBe(true)
+
+    initialData.value = {
+      name: 'bar',
+    }
+
+    expect(form.initialData.value.name).toBe('bar')
+    expect(nameField.initialValue.value).toBe('bar')
+    expect(nameField.data.value).toBe('bar')
+
+    nameField.setInitialData('another')
+
+    expect(nameField.initialValue.value).toBe('another')
+    expect(nameField.data.value).toBe('another')
+  })
+
+  it('it should take over the new initial data from the form after setting initial data on field', { timeout: 500 }, async () => {
+    const initialData = ref({
+      name: null as null | number,
+    })
+
+    const form = useForm({
+      initialData,
+    })
+
+    const nameField = form.getField('name')
+
+    expect(form.isDirty.value).toBe(false)
+    expect(nameField.dirty.value).toBe(false)
+
+    nameField.setInitialData(0)
+
+    expect(form.isDirty.value).toBe(false)
+    expect(nameField.dirty.value).toBe(false)
+
+    initialData.value = {
+      name: null,
+    }
+
+    expect(form.initialData.value.name).toBe(null)
+    expect(nameField.initialValue.value).toBe(null)
+    expect(nameField.data.value).toBe(null)
+
+    nameField.setInitialData(23)
+
+    expect(nameField.initialValue.value).toBe(23)
+    expect(nameField.data.value).toBe(23)
+  })
 })