From 62635b0469612300ce81b1f4f22cd63597432c98 Mon Sep 17 00:00:00 2001
From: Mohamed Melouk <42706279+cobraprojects@users.noreply.github.com>
Date: Tue, 5 May 2026 19:46:19 +0300
Subject: [PATCH 1/2] fix nuxt useForm

---
 apps/blog-next/app/forgot-password/page.tsx   |   2 +-
 apps/blog-next/app/login/page.tsx             |   6 +-
 apps/blog-next/app/register/page.tsx          |   8 +-
 apps/blog-next/app/reset-password/page.tsx    |   6 +-
 apps/blog-next/app/verify-email/page.tsx      |   2 +-
 apps/blog-nuxt/pages/forgot-password.vue      |   2 +-
 apps/blog-nuxt/pages/login.vue                |   6 +-
 apps/blog-nuxt/pages/register.vue             |   8 +-
 apps/blog-nuxt/pages/reset-password.vue       |   6 +-
 apps/blog-nuxt/pages/verify-email.vue         |   4 +-
 .../src/routes/forgot-password/+page.svelte   |   8 +-
 .../src/routes/login/+page.svelte             |  23 ++-
 .../src/routes/register/+page.svelte          |  26 ++-
 .../src/routes/reset-password/+page.svelte    |  13 +-
 .../src/routes/verify-email/+page.svelte      |   2 +-
 apps/docs/docs/forms/client-usage.md          |  31 ++-
 apps/docs/docs/forms/server-validation.md     |  29 ++-
 .../src/runtime/composables/forms.ts          | 195 +++++++++++++-----
 packages/adapter-nuxt/src/vue-shim.d.ts       |   1 +
 packages/adapter-nuxt/tests/client.test.ts    |  54 +++++
 packages/forms/src/client.ts                  |  25 ++-
 packages/forms/tests/client.test.ts           |  24 +++
 22 files changed, 374 insertions(+), 107 deletions(-)

diff --git a/apps/blog-next/app/forgot-password/page.tsx b/apps/blog-next/app/forgot-password/page.tsx
index 6aed2188..aab1f801 100644
--- a/apps/blog-next/app/forgot-password/page.tsx
+++ b/apps/blog-next/app/forgot-password/page.tsx
@@ -39,7 +39,7 @@ export default function ForgotPasswordPage() {
           <input
             name="email"
             type="email"
-            value={form.fields.email.value}
+            value={form.values.email}
             onInput={(event) => form.fields.email.onInput(event.currentTarget.value)}
             onBlur={() => form.fields.email.onBlur()}
           />
diff --git a/apps/blog-next/app/login/page.tsx b/apps/blog-next/app/login/page.tsx
index ebb52b51..9e4ad02e 100644
--- a/apps/blog-next/app/login/page.tsx
+++ b/apps/blog-next/app/login/page.tsx
@@ -43,7 +43,7 @@ export default function LoginPage() {
           <input
             name="email"
             type="email"
-            value={form.fields.email.value}
+            value={form.values.email}
             onInput={(event) => form.fields.email.onInput(event.currentTarget.value)}
             onBlur={() => form.fields.email.onBlur()}
           />
@@ -55,7 +55,7 @@ export default function LoginPage() {
           <input
             name="password"
             type="password"
-            value={form.fields.password.value}
+            value={form.values.password}
             onInput={(event) => form.fields.password.onInput(event.currentTarget.value)}
             onBlur={() => form.fields.password.onBlur()}
           />
@@ -66,7 +66,7 @@ export default function LoginPage() {
           <input
             name="remember"
             type="checkbox"
-            checked={form.fields.remember.value}
+            checked={form.values.remember}
             onChange={(event) => form.fields.remember.onInput(event.currentTarget.checked)}
           />
           Remember me
diff --git a/apps/blog-next/app/register/page.tsx b/apps/blog-next/app/register/page.tsx
index ecdd5f6d..1a744cf5 100644
--- a/apps/blog-next/app/register/page.tsx
+++ b/apps/blog-next/app/register/page.tsx
@@ -44,7 +44,7 @@ export default function RegisterPage() {
           <span>Name</span>
           <input
             name="name"
-            value={form.fields.name.value}
+            value={form.values.name}
             onInput={(event) => form.fields.name.onInput(event.currentTarget.value)}
             onBlur={() => form.fields.name.onBlur()}
           />
@@ -56,7 +56,7 @@ export default function RegisterPage() {
           <input
             name="email"
             type="email"
-            value={form.fields.email.value}
+            value={form.values.email}
             onInput={(event) => form.fields.email.onInput(event.currentTarget.value)}
             onBlur={() => form.fields.email.onBlur()}
           />
@@ -68,7 +68,7 @@ export default function RegisterPage() {
           <input
             name="password"
             type="password"
-            value={form.fields.password.value}
+            value={form.values.password}
             onInput={(event) => form.fields.password.onInput(event.currentTarget.value)}
             onBlur={() => form.fields.password.onBlur()}
           />
@@ -80,7 +80,7 @@ export default function RegisterPage() {
           <input
             name="passwordConfirmation"
             type="password"
-            value={form.fields.passwordConfirmation.value}
+            value={form.values.passwordConfirmation}
             onInput={(event) => form.fields.passwordConfirmation.onInput(event.currentTarget.value)}
             onBlur={() => form.fields.passwordConfirmation.onBlur()}
           />
diff --git a/apps/blog-next/app/reset-password/page.tsx b/apps/blog-next/app/reset-password/page.tsx
index e71ee2e8..558b9bb5 100644
--- a/apps/blog-next/app/reset-password/page.tsx
+++ b/apps/blog-next/app/reset-password/page.tsx
@@ -45,14 +45,14 @@ function ResetPasswordPageContent() {
 
       {token.length > 0 ? (
         <form onSubmit={(event) => { event.preventDefault(); form.submit() }} style={{ display: 'grid', gap: '0.9rem' }}>
-          <input name="token" type="hidden" value={form.fields.token.value} />
+          <input name="token" type="hidden" value={form.values.token} />
 
           <label style={{ display: 'grid', gap: '0.35rem' }}>
             <span>New password</span>
             <input
               name="password"
               type="password"
-              value={form.fields.password.value}
+              value={form.values.password}
               onInput={(event) => form.fields.password.onInput(event.currentTarget.value)}
               onBlur={() => form.fields.password.onBlur()}
             />
@@ -64,7 +64,7 @@ function ResetPasswordPageContent() {
             <input
               name="passwordConfirmation"
               type="password"
-              value={form.fields.passwordConfirmation.value}
+              value={form.values.passwordConfirmation}
               onInput={(event) => form.fields.passwordConfirmation.onInput(event.currentTarget.value)}
               onBlur={() => form.fields.passwordConfirmation.onBlur()}
             />
diff --git a/apps/blog-next/app/verify-email/page.tsx b/apps/blog-next/app/verify-email/page.tsx
index 2ead28f2..0299e3a1 100644
--- a/apps/blog-next/app/verify-email/page.tsx
+++ b/apps/blog-next/app/verify-email/page.tsx
@@ -80,7 +80,7 @@ function VerifyEmailPageContent() {
 
       {token.length > 0 ? (
         <form onSubmit={(event) => { event.preventDefault(); form.submit() }} style={{ display: 'grid', gap: '0.9rem' }}>
-          <input name="token" type="hidden" value={form.fields.token.value} />
+          <input name="token" type="hidden" value={form.values.token} />
           {form.errors.has('token') ? <span style={{ color: '#fca5a5' }}>{form.errors.first('token')}</span> : null}
           <button type="submit" disabled={form.submitting}>
             {form.submitting ? 'Verifying...' : 'Verify email'}
diff --git a/apps/blog-nuxt/pages/forgot-password.vue b/apps/blog-nuxt/pages/forgot-password.vue
index bbced53d..551f857f 100644
--- a/apps/blog-nuxt/pages/forgot-password.vue
+++ b/apps/blog-nuxt/pages/forgot-password.vue
@@ -21,7 +21,7 @@ const form = useForm(forgotPasswordForm, {
     <form class="stack" @submit.prevent="form.submit()">
       <label class="field">
         <span>Email</span>
-        <input name="email" type="email" v-model="form.fields.email.value" @blur="form.fields.email.onBlur()" />
+        <input name="email" type="email" v-model="form.values.email" @blur="form.fields.email.onBlur()" />
         <span v-if="form.errors.has('email')" class="error">{{ form.errors.first('email') }}</span>
       </label>
 
diff --git a/apps/blog-nuxt/pages/login.vue b/apps/blog-nuxt/pages/login.vue
index d62ff83d..74cafaf8 100644
--- a/apps/blog-nuxt/pages/login.vue
+++ b/apps/blog-nuxt/pages/login.vue
@@ -27,18 +27,18 @@ const form = useForm(loginForm, {
     <form class="stack" @submit.prevent="form.submit()">
       <label class="field">
         <span>Email</span>
-        <input name="email" type="email" v-model="form.fields.email.value" @blur="form.fields.email.onBlur()" />
+        <input name="email" type="email" v-model="form.values.email" @blur="form.fields.email.onBlur()" />
         <span v-if="form.errors.has('email')" class="error">{{ form.errors.first('email') }}</span>
       </label>
 
       <label class="field">
         <span>Password</span>
-        <input name="password" type="password" v-model="form.fields.password.value" @blur="form.fields.password.onBlur()" />
+        <input name="password" type="password" v-model="form.values.password" @blur="form.fields.password.onBlur()" />
         <span v-if="form.errors.has('password')" class="error">{{ form.errors.first('password') }}</span>
       </label>
 
       <label class="remember">
-        <input name="remember" type="checkbox" v-model="form.fields.remember.value" />
+        <input name="remember" type="checkbox" v-model="form.values.remember" />
         Remember me
       </label>
 
diff --git a/apps/blog-nuxt/pages/register.vue b/apps/blog-nuxt/pages/register.vue
index ea715053..4eb62b34 100644
--- a/apps/blog-nuxt/pages/register.vue
+++ b/apps/blog-nuxt/pages/register.vue
@@ -28,19 +28,19 @@ const form = useForm(registerForm, {
     <form class="stack" @submit.prevent="form.submit()">
       <label class="field">
         <span>Name</span>
-        <input name="name" v-model="form.fields.name.value" @blur="form.fields.name.onBlur()" />
+        <input name="name" v-model="form.values.name" @blur="form.fields.name.onBlur()" />
         <span v-if="form.errors.has('name')" class="error">{{ form.errors.first('name') }}</span>
       </label>
 
       <label class="field">
         <span>Email</span>
-        <input name="email" type="email" v-model="form.fields.email.value" @blur="form.fields.email.onBlur()" />
+        <input name="email" type="email" v-model="form.values.email" @blur="form.fields.email.onBlur()" />
         <span v-if="form.errors.has('email')" class="error">{{ form.errors.first('email') }}</span>
       </label>
 
       <label class="field">
         <span>Password</span>
-        <input name="password" type="password" v-model="form.fields.password.value" @blur="form.fields.password.onBlur()" />
+        <input name="password" type="password" v-model="form.values.password" @blur="form.fields.password.onBlur()" />
         <span v-if="form.errors.has('password')" class="error">{{ form.errors.first('password') }}</span>
       </label>
 
@@ -49,7 +49,7 @@ const form = useForm(registerForm, {
         <input
           name="passwordConfirmation"
           type="password"
-          v-model="form.fields.passwordConfirmation.value"
+          v-model="form.values.passwordConfirmation"
           @blur="form.fields.passwordConfirmation.onBlur()"
         />
         <span v-if="form.errors.has('passwordConfirmation')" class="error">{{ form.errors.first('passwordConfirmation') }}</span>
diff --git a/apps/blog-nuxt/pages/reset-password.vue b/apps/blog-nuxt/pages/reset-password.vue
index d70453fb..e8ffbe51 100644
--- a/apps/blog-nuxt/pages/reset-password.vue
+++ b/apps/blog-nuxt/pages/reset-password.vue
@@ -23,11 +23,11 @@ const form = useForm(resetPasswordForm, {
     </div>
 
     <form v-if="token" class="stack" @submit.prevent="form.submit()">
-      <input name="token" type="hidden" v-model="form.fields.token.value">
+      <input name="token" type="hidden" v-model="form.values.token">
 
       <label class="field">
         <span>New password</span>
-        <input name="password" type="password" v-model="form.fields.password.value" @blur="form.fields.password.onBlur()" />
+        <input name="password" type="password" v-model="form.values.password" @blur="form.fields.password.onBlur()" />
         <span v-if="form.errors.has('password')" class="error">{{ form.errors.first('password') }}</span>
       </label>
 
@@ -36,7 +36,7 @@ const form = useForm(resetPasswordForm, {
         <input
           name="passwordConfirmation"
           type="password"
-          v-model="form.fields.passwordConfirmation.value"
+          v-model="form.values.passwordConfirmation"
           @blur="form.fields.passwordConfirmation.onBlur()"
         />
         <span v-if="form.errors.has('passwordConfirmation')" class="error">{{ form.errors.first('passwordConfirmation') }}</span>
diff --git a/apps/blog-nuxt/pages/verify-email.vue b/apps/blog-nuxt/pages/verify-email.vue
index f7822dd7..e132e1c4 100644
--- a/apps/blog-nuxt/pages/verify-email.vue
+++ b/apps/blog-nuxt/pages/verify-email.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useRoute } from '#imports'
-import { ref } from 'vue'
 import { useForm } from '@holo-js/adapter-nuxt/client'
+import { ref } from 'vue'
 import { verifyEmailForm } from '~/lib/schemas/auth'
 
 const route = useRoute()
@@ -53,7 +53,7 @@ async function resendVerificationEmail() {
     </div>
 
     <form v-if="token" class="stack" @submit.prevent="form.submit()">
-      <input name="token" type="hidden" v-model="form.fields.token.value">
+      <input name="token" type="hidden" v-model="form.values.token">
       <span v-if="form.errors.has('token')" class="error">{{ form.errors.first('token') }}</span>
       <button :disabled="form.submitting">
         {{ form.submitting ? 'Verifying...' : 'Verify email' }}
diff --git a/apps/blog-sveltekit/src/routes/forgot-password/+page.svelte b/apps/blog-sveltekit/src/routes/forgot-password/+page.svelte
index 41924575..6056bd79 100644
--- a/apps/blog-sveltekit/src/routes/forgot-password/+page.svelte
+++ b/apps/blog-sveltekit/src/routes/forgot-password/+page.svelte
@@ -21,7 +21,13 @@
   <form class="stack" on:submit={(event) => { event.preventDefault(); form.submit() }}>
     <label class="field">
       <span>Email</span>
-      <input name="email" type="email" bind:value={form.fields.email.value} on:blur={() => form.fields.email.onBlur()} />
+      <input
+        name="email"
+        type="email"
+        value={form.values.email}
+        on:input={(event) => form.fields.email.onInput(event.currentTarget.value)}
+        on:blur={() => form.fields.email.onBlur()}
+      />
       {#if form.errors.has('email')}
         <span class="error">{form.errors.first('email')}</span>
       {/if}
diff --git a/apps/blog-sveltekit/src/routes/login/+page.svelte b/apps/blog-sveltekit/src/routes/login/+page.svelte
index 84472c58..4c9790e0 100644
--- a/apps/blog-sveltekit/src/routes/login/+page.svelte
+++ b/apps/blog-sveltekit/src/routes/login/+page.svelte
@@ -26,7 +26,13 @@
   <form class="stack" on:submit={(event) => { event.preventDefault(); form.submit() }}>
     <label class="field">
       <span>Email</span>
-      <input name="email" type="email" bind:value={form.fields.email.value} on:blur={() => form.fields.email.onBlur()} />
+      <input
+        name="email"
+        type="email"
+        value={form.values.email}
+        on:input={(event) => form.fields.email.onInput(event.currentTarget.value)}
+        on:blur={() => form.fields.email.onBlur()}
+      />
       {#if form.errors.has('email')}
         <span class="error">{form.errors.first('email')}</span>
       {/if}
@@ -34,14 +40,25 @@
 
     <label class="field">
       <span>Password</span>
-      <input name="password" type="password" bind:value={form.fields.password.value} on:blur={() => form.fields.password.onBlur()} />
+      <input
+        name="password"
+        type="password"
+        value={form.values.password}
+        on:input={(event) => form.fields.password.onInput(event.currentTarget.value)}
+        on:blur={() => form.fields.password.onBlur()}
+      />
       {#if form.errors.has('password')}
         <span class="error">{form.errors.first('password')}</span>
       {/if}
     </label>
 
     <label class="remember">
-      <input name="remember" type="checkbox" bind:checked={form.fields.remember.value} />
+      <input
+        name="remember"
+        type="checkbox"
+        checked={form.values.remember}
+        on:change={(event) => form.fields.remember.onInput(event.currentTarget.checked)}
+      />
       Remember me
     </label>
 
diff --git a/apps/blog-sveltekit/src/routes/register/+page.svelte b/apps/blog-sveltekit/src/routes/register/+page.svelte
index ccbacd10..757a9716 100644
--- a/apps/blog-sveltekit/src/routes/register/+page.svelte
+++ b/apps/blog-sveltekit/src/routes/register/+page.svelte
@@ -26,7 +26,12 @@
   <form class="stack" on:submit={(event) => { event.preventDefault(); form.submit() }}>
     <label class="field">
       <span>Name</span>
-      <input name="name" bind:value={form.fields.name.value} on:blur={() => form.fields.name.onBlur()} />
+      <input
+        name="name"
+        value={form.values.name}
+        on:input={(event) => form.fields.name.onInput(event.currentTarget.value)}
+        on:blur={() => form.fields.name.onBlur()}
+      />
       {#if form.errors.has('name')}
         <span class="error">{form.errors.first('name')}</span>
       {/if}
@@ -34,7 +39,13 @@
 
     <label class="field">
       <span>Email</span>
-      <input name="email" type="email" bind:value={form.fields.email.value} on:blur={() => form.fields.email.onBlur()} />
+      <input
+        name="email"
+        type="email"
+        value={form.values.email}
+        on:input={(event) => form.fields.email.onInput(event.currentTarget.value)}
+        on:blur={() => form.fields.email.onBlur()}
+      />
       {#if form.errors.has('email')}
         <span class="error">{form.errors.first('email')}</span>
       {/if}
@@ -42,7 +53,13 @@
 
     <label class="field">
       <span>Password</span>
-      <input name="password" type="password" bind:value={form.fields.password.value} on:blur={() => form.fields.password.onBlur()} />
+      <input
+        name="password"
+        type="password"
+        value={form.values.password}
+        on:input={(event) => form.fields.password.onInput(event.currentTarget.value)}
+        on:blur={() => form.fields.password.onBlur()}
+      />
       {#if form.errors.has('password')}
         <span class="error">{form.errors.first('password')}</span>
       {/if}
@@ -53,7 +70,8 @@
       <input
         name="passwordConfirmation"
         type="password"
-        bind:value={form.fields.passwordConfirmation.value}
+        value={form.values.passwordConfirmation}
+        on:input={(event) => form.fields.passwordConfirmation.onInput(event.currentTarget.value)}
         on:blur={() => form.fields.passwordConfirmation.onBlur()}
       />
       {#if form.errors.has('passwordConfirmation')}
diff --git a/apps/blog-sveltekit/src/routes/reset-password/+page.svelte b/apps/blog-sveltekit/src/routes/reset-password/+page.svelte
index ec21502d..a05ada33 100644
--- a/apps/blog-sveltekit/src/routes/reset-password/+page.svelte
+++ b/apps/blog-sveltekit/src/routes/reset-password/+page.svelte
@@ -24,11 +24,17 @@
 
   {#if data.token}
     <form class="stack" on:submit={(event) => { event.preventDefault(); form.submit() }}>
-      <input name="token" type="hidden" bind:value={form.fields.token.value} />
+      <input name="token" type="hidden" value={form.values.token} />
 
       <label class="field">
         <span>New password</span>
-        <input name="password" type="password" bind:value={form.fields.password.value} on:blur={() => form.fields.password.onBlur()} />
+        <input
+          name="password"
+          type="password"
+          value={form.values.password}
+          on:input={(event) => form.fields.password.onInput(event.currentTarget.value)}
+          on:blur={() => form.fields.password.onBlur()}
+        />
         {#if form.errors.has('password')}
           <span class="error">{form.errors.first('password')}</span>
         {/if}
@@ -39,7 +45,8 @@
         <input
           name="passwordConfirmation"
           type="password"
-          bind:value={form.fields.passwordConfirmation.value}
+          value={form.values.passwordConfirmation}
+          on:input={(event) => form.fields.passwordConfirmation.onInput(event.currentTarget.value)}
           on:blur={() => form.fields.passwordConfirmation.onBlur()}
         />
         {#if form.errors.has('passwordConfirmation')}
diff --git a/apps/blog-sveltekit/src/routes/verify-email/+page.svelte b/apps/blog-sveltekit/src/routes/verify-email/+page.svelte
index 79b573e6..8219dc09 100644
--- a/apps/blog-sveltekit/src/routes/verify-email/+page.svelte
+++ b/apps/blog-sveltekit/src/routes/verify-email/+page.svelte
@@ -56,7 +56,7 @@
 
   {#if data.token}
     <form class="stack" on:submit={(event) => { event.preventDefault(); form.submit() }}>
-      <input name="token" type="hidden" bind:value={form.fields.token.value} />
+      <input name="token" type="hidden" value={form.values.token} />
       {#if form.errors.has('token')}
         <span class="error">{form.errors.first('token')}</span>
       {/if}
diff --git a/apps/docs/docs/forms/client-usage.md b/apps/docs/docs/forms/client-usage.md
index cc245d00..70a72b5e 100644
--- a/apps/docs/docs/forms/client-usage.md
+++ b/apps/docs/docs/forms/client-usage.md
@@ -53,7 +53,7 @@ export default function RegisterPage() {
     <form onSubmit={(event) => { event.preventDefault(); form.submit() }}>
       <input
         name="name"
-        value={form.fields.name.value}
+        value={form.values.name}
         onInput={(e) => form.fields.name.onInput(e.currentTarget.value)}
         onBlur={() => form.fields.name.onBlur()}
       />
@@ -61,7 +61,7 @@ export default function RegisterPage() {
 
       <input
         name="email"
-        value={form.fields.email.value}
+        value={form.values.email}
         onInput={(e) => form.fields.email.onInput(e.currentTarget.value)}
         onBlur={() => form.fields.email.onBlur()}
       />
@@ -94,10 +94,10 @@ const form = useForm(registerUser, {
 
 <template>
   <form @submit.prevent="form.submit()">
-    <input name="name" v-model="form.fields.name.value" @blur="form.fields.name.onBlur()" />
+    <input name="name" v-model="form.values.name" @blur="form.fields.name.onBlur()" />
     <p v-if="form.errors.has('name')">{{ form.errors.first('name') }}</p>
 
-    <input name="email" v-model="form.fields.email.value" @blur="form.fields.email.onBlur()" />
+    <input name="email" v-model="form.values.email" @blur="form.fields.email.onBlur()" />
     <p v-if="form.errors.has('email')">{{ form.errors.first('email') }}</p>
 
     <button :disabled="form.submitting">
@@ -126,12 +126,22 @@ const form = useForm(registerUser, {
 </script>
 
 <form onsubmit={(e) => { e.preventDefault(); form.submit() }}>
-  <input name="name" bind:value={form.fields.name.value} onblur={() => form.fields.name.onBlur()} />
+  <input
+    name="name"
+    value={form.values.name}
+    oninput={(event) => form.fields.name.onInput(event.currentTarget.value)}
+    onblur={() => form.fields.name.onBlur()}
+  />
   {#if form.errors.has('name')}
     <p>{form.errors.first('name')}</p>
   {/if}
 
-  <input name="email" bind:value={form.fields.email.value} onblur={() => form.fields.email.onBlur()} />
+  <input
+    name="email"
+    value={form.values.email}
+    oninput={(event) => form.fields.email.onInput(event.currentTarget.value)}
+    onblur={() => form.fields.email.onBlur()}
+  />
   {#if form.errors.has('email')}
     <p>{form.errors.first('email')}</p>
   {/if}
@@ -148,6 +158,9 @@ const form = useForm(registerUser, {
 
 :::
 
+With `validateOn: 'blur'`, calling `form.fields.name.onBlur()` validates that field path and updates that
+field's errors. It does not surface every other untouched field error in the form.
+
 ## What happens on failure
 
 If the server returns `submission.fail()`, `useForm(...)` applies that payload automatically:
@@ -182,7 +195,7 @@ configureSecurityClient({
 `useForm(...)` exposes:
 
 ```ts
-form.fields.email.value       // current value
+form.values.email             // current value
 form.fields.email.errors      // field-level errors
 form.fields.email.touched     // has been interacted with
 form.fields.email.dirty       // differs from initial value
@@ -195,6 +208,10 @@ form.valid                    // true when no errors
 form.lastSubmission           // last server response
 ```
 
+Use `form.values.email` as the field value source across frameworks.
+`form.fields.email.onBlur()` is still the blur/touched bridge for `validateOn: 'blur'`, and React/Svelte input
+handlers still call `form.fields.email.onInput(...)`.
+
 Manual validation:
 
 ```ts
diff --git a/apps/docs/docs/forms/server-validation.md b/apps/docs/docs/forms/server-validation.md
index 874b0b10..0d6fe620 100644
--- a/apps/docs/docs/forms/server-validation.md
+++ b/apps/docs/docs/forms/server-validation.md
@@ -212,12 +212,22 @@ in other frameworks:
 </script>
 
 <form onsubmit={(e) => { e.preventDefault(); form.submit() }}>
-  <input name="name" bind:value={form.fields.name.value} onblur={() => form.fields.name.onBlur()} />
+  <input
+    name="name"
+    value={form.values.name}
+    oninput={(event) => form.fields.name.onInput(event.currentTarget.value)}
+    onblur={() => form.fields.name.onBlur()}
+  />
   {#if form.errors.has('name')}
     <p>{form.errors.first('name')}</p>
   {/if}
 
-  <input name="email" bind:value={form.fields.email.value} onblur={() => form.fields.email.onBlur()} />
+  <input
+    name="email"
+    value={form.values.email}
+    oninput={(event) => form.fields.email.onInput(event.currentTarget.value)}
+    onblur={() => form.fields.email.onBlur()}
+  />
   {#if form.errors.has('email')}
     <p>{form.errors.first('email')}</p>
   {/if}
@@ -255,7 +265,7 @@ export default function LoginPage() {
       <input
         name="email"
         type="email"
-        value={form.fields.email.value}
+        value={form.values.email}
         onInput={(event) => form.fields.email.onInput(event.currentTarget.value)}
         onBlur={() => form.fields.email.onBlur()}
       />
@@ -264,7 +274,7 @@ export default function LoginPage() {
       <input
         name="password"
         type="password"
-        value={form.fields.password.value}
+        value={form.values.password}
         onInput={(event) => form.fields.password.onInput(event.currentTarget.value)}
         onBlur={() => form.fields.password.onBlur()}
       />
@@ -274,7 +284,7 @@ export default function LoginPage() {
         <input
           name="remember"
           type="checkbox"
-          checked={form.fields.remember.value}
+          checked={form.values.remember}
           onChange={(event) => form.fields.remember.onInput(event.currentTarget.checked)}
         />
         Remember me
@@ -306,14 +316,14 @@ const form = useForm(loginForm, {
 
 <template>
   <form @submit.prevent="form.submit()">
-    <input name="email" type="email" v-model="form.fields.email.value" @blur="form.fields.email.onBlur()" />
+    <input name="email" type="email" v-model="form.values.email" @blur="form.fields.email.onBlur()" />
     <p v-if="form.errors.has('email')">{{ form.errors.first('email') }}</p>
 
-    <input name="password" type="password" v-model="form.fields.password.value" @blur="form.fields.password.onBlur()" />
+    <input name="password" type="password" v-model="form.values.password" @blur="form.fields.password.onBlur()" />
     <p v-if="form.errors.has('password')">{{ form.errors.first('password') }}</p>
 
     <label>
-      <input name="remember" type="checkbox" v-model="form.fields.remember.value" />
+      <input name="remember" type="checkbox" v-model="form.values.remember" />
       Remember me
     </label>
 
@@ -326,6 +336,9 @@ const form = useForm(loginForm, {
 </template>
 ```
 
+Bind displayed values from `form.values.*` across frameworks and keep `form.fields.*` for touched state,
+blur-time validation, and field lifecycle helpers.
+
 ```svelte [SvelteKit — src/routes/login/+page.svelte (form actions)]
 <script lang="ts">
   let { form } = $props()
diff --git a/packages/adapter-nuxt/src/runtime/composables/forms.ts b/packages/adapter-nuxt/src/runtime/composables/forms.ts
index df7ac331..6a0cef56 100644
--- a/packages/adapter-nuxt/src/runtime/composables/forms.ts
+++ b/packages/adapter-nuxt/src/runtime/composables/forms.ts
@@ -1,4 +1,4 @@
-import { onScopeDispose, shallowRef, watchEffect } from 'vue'
+import { onScopeDispose, reactive, shallowRef, watchEffect } from 'vue'
 import type { FormSchema, InferFormData } from '@holo-js/forms'
 import {
   type InferFormFieldTree,
@@ -17,8 +17,9 @@ export {
   type ValidateOnMode,
 } from '@holo-js/forms/client'
 
-type VersionRef = {
-  value: number
+type FormValuesBridge = {
+  readonly values: unknown
+  setValue(path: string, value: unknown): Promise<void>
 }
 
 function isPlainObject(value: unknown): value is Record<string, unknown> {
@@ -29,64 +30,93 @@ function isPlainObject(value: unknown): value is Record<string, unknown> {
     && !(value instanceof Blob)
 }
 
-function createReactiveView<TValue extends object>(
-  targetRef: { value: TValue },
-  version: VersionRef,
-  cache: WeakMap<object, object>,
-): TValue {
-  const target = targetRef.value
-  const cached = cache.get(target)
+function isLeafValue(value: unknown): boolean {
+  return Array.isArray(value)
+    || value instanceof Date
+    || value instanceof Blob
+    || !isPlainObject(value)
+}
 
-  if (cached) {
-    return cached as TValue
-  }
+function getValueAtPath(root: unknown, path: string): unknown {
+  const parts = path.split('.').map(part => part.trim()).filter(Boolean)
+  let cursor = root
 
-  const proxy = new Proxy({}, {
-    get(_shell, key) {
-      void version.value
-      const currentTarget = targetRef.value
-      const value = Reflect.get(currentTarget as object, key)
+  for (const part of parts) {
+    if (!isPlainObject(cursor) && !Array.isArray(cursor)) {
+      return undefined
+    }
 
-      if (typeof value === 'function') {
-        return value.bind(currentTarget)
-      }
+    cursor = (cursor as Record<string, unknown>)[part]
+  }
 
-      if (isPlainObject(value)) {
-        return createReactiveView({ value: value as object }, version, cache)
-      }
+  return cursor
+}
 
-      return value
-    },
-    set(_shell, key, value) {
-      const updated = Reflect.set(targetRef.value as object, key, value)
-      version.value += 1
-      return updated
-    },
-    ownKeys() {
+function defineLeafAccessor(
+  target: Record<string, unknown>,
+  key: string,
+  path: string,
+  form: { value: FormValuesBridge },
+  version: { value: number },
+): void {
+  const descriptor = Object.getOwnPropertyDescriptor(target, key)
+  if (descriptor?.get && descriptor?.set) {
+    return
+  }
+
+  Object.defineProperty(target, key, {
+    enumerable: true,
+    configurable: true,
+    get() {
       void version.value
-      return Reflect.ownKeys(targetRef.value as object)
+      return getValueAtPath(form.value.values, path)
     },
-    getOwnPropertyDescriptor(_shell, key) {
-      void version.value
-      const descriptor = Reflect.getOwnPropertyDescriptor(targetRef.value as object, key)
+    set(nextValue: unknown) {
+      void form.value.setValue(path, nextValue)
+    },
+  })
+}
 
-      if (!descriptor) {
-        return undefined
-      }
+function syncValuesView(
+  target: Record<string, unknown>,
+  source: unknown,
+  form: { value: FormValuesBridge },
+  version: { value: number },
+  prefix = '',
+): void {
+  if (!isPlainObject(source)) {
+    for (const key of Object.keys(target)) {
+      delete target[key]
+    }
+
+    return
+  }
 
-      return {
-        ...descriptor,
-        configurable: true,
+  for (const key of Object.keys(target)) {
+    if (!(key in source)) {
+      delete target[key]
+    }
+  }
+
+  for (const [key, item] of Object.entries(source)) {
+    const path = prefix ? `${prefix}.${key}` : key
+    const current = target[key]
+
+    if (isLeafValue(item)) {
+      if (isPlainObject(current)) {
+        delete target[key]
       }
-    },
-    has(_shell, key) {
-      void version.value
-      return Reflect.has(targetRef.value as object, key)
-    },
-  })
 
-  cache.set(target, proxy)
-  return proxy as TValue
+      defineLeafAccessor(target, key, path, form, version)
+      continue
+    }
+
+    if (!isPlainObject(current)) {
+      target[key] = {}
+    }
+
+    syncValuesView(target[key] as Record<string, unknown>, item, form, version, path)
+  }
 }
 
 export function useForm<TSchema extends FormSchema, TSuccess = unknown>(
@@ -95,13 +125,27 @@ export function useForm<TSchema extends FormSchema, TSuccess = unknown>(
 ): UseFormResult<InferFormData<TSchema>, TSuccess, InferFormFieldTree<TSchema>> {
   const form = shallowRef(createForm(schemaDefinition, options))
   const version = shallowRef(0)
-  const cache = new WeakMap<object, object>()
+  let versionCounter = 0
+  const rawValues: Record<string, unknown> = {}
+  const values = reactive(rawValues) as InferFormData<TSchema>
+
+  const syncValuesFromForm = () => {
+    syncValuesView(
+      rawValues,
+      form.value.values,
+      form as { value: FormValuesBridge },
+      version,
+    )
+  }
+
   const stopWatching = watchEffect((onCleanup) => {
     form.value = createForm(schemaDefinition, options)
-    version.value += 1
+    syncValuesFromForm()
+    version.value = ++versionCounter
 
     const unsubscribe = form.value.subscribe(() => {
-      version.value += 1
+      syncValuesFromForm()
+      version.value = ++versionCounter
     })
 
     onCleanup(unsubscribe)
@@ -109,5 +153,48 @@ export function useForm<TSchema extends FormSchema, TSuccess = unknown>(
 
   onScopeDispose(stopWatching)
 
-  return createReactiveView(form, version, cache)
+  return reactive({
+    get fields() {
+      void version.value
+      return form.value.fields
+    },
+    values,
+    get errors() {
+      void version.value
+      return form.value.errors
+    },
+    get submitting() {
+      void version.value
+      return form.value.submitting
+    },
+    get valid() {
+      void version.value
+      return form.value.valid
+    },
+    get lastSubmission() {
+      void version.value
+      return form.value.lastSubmission
+    },
+    subscribe(listener: () => void) {
+      return form.value.subscribe(listener)
+    },
+    async validate() {
+      return await form.value.validate()
+    },
+    async validateField(path: string) {
+      return await form.value.validateField(path)
+    },
+    async submit() {
+      return await form.value.submit()
+    },
+    reset(nextValues?: Partial<InferFormData<TSchema>>) {
+      form.value.reset(nextValues)
+    },
+    async setValue(path: string, value: unknown) {
+      await form.value.setValue(path, value)
+    },
+    applyServerState(result: ReturnType<UseFormResult<InferFormData<TSchema>, TSuccess>['applyServerState']>) {
+      return form.value.applyServerState(result)
+    },
+  }) as UseFormResult<InferFormData<TSchema>, TSuccess, InferFormFieldTree<TSchema>>
 }
diff --git a/packages/adapter-nuxt/src/vue-shim.d.ts b/packages/adapter-nuxt/src/vue-shim.d.ts
index 288eda57..ec37b8d4 100644
--- a/packages/adapter-nuxt/src/vue-shim.d.ts
+++ b/packages/adapter-nuxt/src/vue-shim.d.ts
@@ -1,5 +1,6 @@
 declare module 'vue' {
   export function onScopeDispose(callback: () => void): void
+  export function reactive<TValue extends object>(target: TValue): TValue
   export function shallowRef<TValue>(value: TValue): { value: TValue }
   export function watchEffect(effect: (onCleanup: (cleanup: () => void) => void) => void): () => void
 }
diff --git a/packages/adapter-nuxt/tests/client.test.ts b/packages/adapter-nuxt/tests/client.test.ts
index 5c3e5712..4aa1f314 100644
--- a/packages/adapter-nuxt/tests/client.test.ts
+++ b/packages/adapter-nuxt/tests/client.test.ts
@@ -22,6 +22,9 @@ describe('@holo-js/adapter-nuxt client', () => {
           ;(globalThis as unknown as { __holoNuxtClientDisposed?: boolean }).__holoNuxtClientDisposed = true
         }
       },
+      reactive<TValue extends object>(value: TValue) {
+        return value
+      },
       shallowRef<TValue>(value: TValue) {
         return { value }
       },
@@ -59,6 +62,9 @@ describe('@holo-js/adapter-nuxt client', () => {
   it('exposes nested keys that are added after the wrapper is created', async () => {
     vi.doMock('vue', () => ({
       onScopeDispose() {},
+      reactive<TValue extends object>(value: TValue) {
+        return value
+      },
       shallowRef<TValue>(value: TValue) {
         return { value }
       },
@@ -97,6 +103,9 @@ describe('@holo-js/adapter-nuxt client', () => {
   it('returns undefined descriptors for missing proxy keys', async () => {
     vi.doMock('vue', () => ({
       onScopeDispose() {},
+      reactive<TValue extends object>(value: TValue) {
+        return value
+      },
       shallowRef<TValue>(value: TValue) {
         return { value }
       },
@@ -126,6 +135,9 @@ describe('@holo-js/adapter-nuxt client', () => {
   it('preserves array and date values as native objects through the proxy', async () => {
     vi.doMock('vue', () => ({
       onScopeDispose() {},
+      reactive<TValue extends object>(value: TValue) {
+        return value
+      },
       shallowRef<TValue>(value: TValue) {
         return { value }
       },
@@ -163,6 +175,9 @@ describe('@holo-js/adapter-nuxt client', () => {
 
     vi.doMock('vue', () => ({
       onScopeDispose() {},
+      reactive<TValue extends object>(value: TValue) {
+        return value
+      },
       shallowRef<TValue>(value: TValue) {
         return { value }
       },
@@ -205,4 +220,43 @@ describe('@holo-js/adapter-nuxt client', () => {
 
     expect(form.values.email).toBe('nora@example.com')
   })
+
+  it('returns Vue-reactive form state for v-model bindings', async () => {
+    const reactiveCalls: unknown[] = []
+
+    vi.doMock('vue', () => ({
+      onScopeDispose() {},
+      reactive<TValue extends object>(value: TValue) {
+        reactiveCalls.push(value)
+        return value
+      },
+      shallowRef<TValue>(value: TValue) {
+        return { value }
+      },
+      watchEffect(effect: (onCleanup: (cleanup: () => void) => void) => void) {
+        let cleanup: (() => void) | undefined
+        effect((nextCleanup) => {
+          cleanup = nextCleanup
+        })
+        return () => cleanup?.()
+      },
+    }))
+
+    const { useForm } = await import('../src/runtime/composables/forms')
+    const login = schema({
+      email: field.string().required().email(),
+    })
+
+    const form = useForm(login, {
+      initialValues: {
+        email: '',
+      },
+    })
+
+    expect(reactiveCalls.length).toBeGreaterThan(0)
+
+    form.values.email = 'ava@example.com'
+
+    expect(form.fields.email.value).toBe('ava@example.com')
+  })
 })
diff --git a/packages/forms/src/client.ts b/packages/forms/src/client.ts
index b9330fe7..105d9e62 100644
--- a/packages/forms/src/client.ts
+++ b/packages/forms/src/client.ts
@@ -466,6 +466,25 @@ function collectErrorsForPath(
     : []
 }
 
+function replaceErrorsForPath(
+  flattenedErrors: Record<string, readonly string[]>,
+  path: string,
+  nextErrors: Record<string, readonly string[]>,
+): Record<string, readonly string[]> {
+  const prefix = `${path}.`
+  const merged = Object.fromEntries(
+    Object.entries(flattenedErrors).filter(([key]) => key !== path && !key.startsWith(prefix)),
+  )
+
+  for (const [key, messages] of Object.entries(nextErrors)) {
+    if (key === path || key.startsWith(prefix)) {
+      merged[key] = messages
+    }
+  }
+
+  return merged
+}
+
 function buildFieldsTree<TData>(
   state: MutableState<TData, unknown>,
   schemaDefinition: FormSchema,
@@ -514,7 +533,11 @@ function buildFieldsTree<TData>(
         state.touched.add(path)
         if (validateOn === 'blur') {
           const submission = await validateClientValues(state.values, schemaDefinition) as FormSubmissionResult<TData>
-          state.flattenedErrors = submission.errors.flatten()
+          state.flattenedErrors = replaceErrorsForPath(
+            state.flattenedErrors,
+            path,
+            submission.errors.flatten(),
+          )
         }
 
         notifyListeners(state)
diff --git a/packages/forms/tests/client.test.ts b/packages/forms/tests/client.test.ts
index 15367222..9a2d2399 100644
--- a/packages/forms/tests/client.test.ts
+++ b/packages/forms/tests/client.test.ts
@@ -268,11 +268,35 @@ describe('@holo-js/forms client', () => {
     await blurClient.fields.profile.city.onBlur()
     expect(blurClient.fields.profile.city.touched).toBe(true)
     expect(blurClient.errors.first('profile.city')).toBe('This field is required.')
+    expect(blurClient.errors.first('email')).toBeUndefined()
 
     const emailErrors = await blurClient.fields.email.validate()
     expect(emailErrors).toEqual([])
   })
 
+  it('keeps untouched field errors hidden when blur validation runs', async () => {
+    const registerUser = schema({
+      name: field.string().required(),
+      email: field.string().required().email(),
+      password: field.string().required().min(8),
+    })
+
+    const client = useForm(registerUser, {
+      initialValues: {
+        name: '',
+        email: '',
+        password: '',
+      },
+      validateOn: 'blur',
+    })
+
+    await client.fields.name.onBlur()
+
+    expect(client.errors.first('name')).toBe('This field is required.')
+    expect(client.errors.first('email')).toBeUndefined()
+    expect(client.errors.first('password')).toBeUndefined()
+  })
+
   it('validates, resets, and preserves local failure state on submit', async () => {
     const registerUser = schema({
       email: field.string().required().email(),

From e97af6f3222fa7fb21208c673f13e16e31b69279 Mon Sep 17 00:00:00 2001
From: Mohamed Melouk <42706279+cobraprojects@users.noreply.github.com>
Date: Tue, 5 May 2026 20:42:49 +0300
Subject: [PATCH 2/2] fix

---
 apps/blog-nuxt/pages/reset-password.vue       |   2 +-
 apps/docs/docs/forms/client-usage.md          |   5 +-
 apps/docs/docs/forms/server-validation.md     |   6 +-
 .../src/runtime/composables/forms.ts          | 112 +++++++++++++++++-
 packages/adapter-nuxt/tests/client.test.ts    |  58 ++++++++-
 5 files changed, 169 insertions(+), 14 deletions(-)

diff --git a/apps/blog-nuxt/pages/reset-password.vue b/apps/blog-nuxt/pages/reset-password.vue
index e8ffbe51..76864fd3 100644
--- a/apps/blog-nuxt/pages/reset-password.vue
+++ b/apps/blog-nuxt/pages/reset-password.vue
@@ -23,7 +23,7 @@ const form = useForm(resetPasswordForm, {
     </div>
 
     <form v-if="token" class="stack" @submit.prevent="form.submit()">
-      <input name="token" type="hidden" v-model="form.values.token">
+      <input name="token" type="hidden" :value="form.values.token">
 
       <label class="field">
         <span>New password</span>
diff --git a/apps/docs/docs/forms/client-usage.md b/apps/docs/docs/forms/client-usage.md
index 70a72b5e..c3260e52 100644
--- a/apps/docs/docs/forms/client-usage.md
+++ b/apps/docs/docs/forms/client-usage.md
@@ -209,8 +209,9 @@ form.lastSubmission           // last server response
 ```
 
 Use `form.values.email` as the field value source across frameworks.
-`form.fields.email.onBlur()` is still the blur/touched bridge for `validateOn: 'blur'`, and React/Svelte input
-handlers still call `form.fields.email.onInput(...)`.
+`form.fields.email.onBlur()` is the blur-validation hook when `validateOn: 'blur'` is enabled, while touched state
+can also be set during input and value updates through helpers like `form.fields.email.onInput(...)` and
+`form.setValue(...)`.
 
 Manual validation:
 
diff --git a/apps/docs/docs/forms/server-validation.md b/apps/docs/docs/forms/server-validation.md
index 0d6fe620..0c21ab6d 100644
--- a/apps/docs/docs/forms/server-validation.md
+++ b/apps/docs/docs/forms/server-validation.md
@@ -336,8 +336,10 @@ const form = useForm(loginForm, {
 </template>
 ```
 
-Bind displayed values from `form.values.*` across frameworks and keep `form.fields.*` for touched state,
-blur-time validation, and field lifecycle helpers.
+Bind displayed values from `form.values.*` across frameworks and keep `form.fields.*` for field lifecycle helpers.
+`form.fields.email.onBlur()` is the blur-validation hook when `validateOn: 'blur'` is enabled, while touched
+state can also be set during input and value updates through helpers like `form.fields.email.onInput(...)`
+and `form.setValue(...)`.
 
 ```svelte [SvelteKit — src/routes/login/+page.svelte (form actions)]
 <script lang="ts">
diff --git a/packages/adapter-nuxt/src/runtime/composables/forms.ts b/packages/adapter-nuxt/src/runtime/composables/forms.ts
index 6a0cef56..197d1340 100644
--- a/packages/adapter-nuxt/src/runtime/composables/forms.ts
+++ b/packages/adapter-nuxt/src/runtime/composables/forms.ts
@@ -22,6 +22,18 @@ type FormValuesBridge = {
   setValue(path: string, value: unknown): Promise<void>
 }
 
+const ARRAY_MUTATION_METHODS = new Set([
+  'copyWithin',
+  'fill',
+  'pop',
+  'push',
+  'reverse',
+  'shift',
+  'sort',
+  'splice',
+  'unshift',
+])
+
 function isPlainObject(value: unknown): value is Record<string, unknown> {
   return !!value
     && typeof value === 'object'
@@ -31,10 +43,9 @@ function isPlainObject(value: unknown): value is Record<string, unknown> {
 }
 
 function isLeafValue(value: unknown): boolean {
-  return Array.isArray(value)
-    || value instanceof Date
+  return value instanceof Date
     || value instanceof Blob
-    || !isPlainObject(value)
+    || (!Array.isArray(value) && !isPlainObject(value))
 }
 
 function getValueAtPath(root: unknown, path: string): unknown {
@@ -52,12 +63,86 @@ function getValueAtPath(root: unknown, path: string): unknown {
   return cursor
 }
 
+function createArrayMutationView(
+  source: readonly unknown[],
+  path: string,
+  form: { value: FormValuesBridge },
+  version: { value: number },
+  cache: WeakMap<readonly unknown[], unknown[]>,
+): unknown[] {
+  const cached = cache.get(source)
+  if (cached) {
+    return cached
+  }
+
+  const proxy = new Proxy([] as unknown[], {
+    get(_target, key) {
+      void version.value
+      const current = getValueAtPath(form.value.values, path)
+      if (!Array.isArray(current)) {
+        return undefined
+      }
+
+      const value = Reflect.get(current, key, current)
+      if (typeof value !== 'function') {
+        return value
+      }
+
+      if (typeof key === 'string' && ARRAY_MUTATION_METHODS.has(key)) {
+        return (...args: unknown[]) => {
+          const latest = getValueAtPath(form.value.values, path)
+          if (!Array.isArray(latest)) {
+            return undefined
+          }
+
+          const next = latest.slice()
+          const result = Reflect.get(next, key, next).apply(next, args)
+          void form.value.setValue(path, next)
+          return result
+        }
+      }
+
+      return value.bind(current)
+    },
+    set(_target, key, value) {
+      const current = getValueAtPath(form.value.values, path)
+      if (!Array.isArray(current)) {
+        return false
+      }
+
+      const next = current.slice()
+      const updated = Reflect.set(next, key, value)
+      if (updated) {
+        void form.value.setValue(path, next)
+      }
+      return updated
+    },
+    deleteProperty(_target, key) {
+      const current = getValueAtPath(form.value.values, path)
+      if (!Array.isArray(current)) {
+        return false
+      }
+
+      const next = current.slice()
+      const deleted = Reflect.deleteProperty(next, key)
+      if (deleted) {
+        void form.value.setValue(path, next)
+      }
+      return deleted
+    },
+  })
+
+  cache.set(source, proxy)
+  return proxy
+}
+
 function defineLeafAccessor(
   target: Record<string, unknown>,
   key: string,
   path: string,
   form: { value: FormValuesBridge },
   version: { value: number },
+  arrayCache: WeakMap<readonly unknown[], unknown[]>,
 ): void {
   const descriptor = Object.getOwnPropertyDescriptor(target, key)
   if (descriptor?.get && descriptor?.set) {
@@ -69,7 +154,10 @@ function defineLeafAccessor(
     configurable: true,
     get() {
       void version.value
-      return getValueAtPath(form.value.values, path)
+      const value = getValueAtPath(form.value.values, path)
+      return Array.isArray(value)
+        ? createArrayMutationView(value, path, form, version, arrayCache)
+        : value
     },
     set(nextValue: unknown) {
       void form.value.setValue(path, nextValue)
@@ -82,6 +170,7 @@ function syncValuesView(
   source: unknown,
   form: { value: FormValuesBridge },
   version: { value: number },
+  arrayCache: WeakMap<readonly unknown[], unknown[]>,
   prefix = '',
 ): void {
   if (!isPlainObject(source)) {
@@ -102,12 +191,21 @@ function syncValuesView(
     const path = prefix ? `${prefix}.${key}` : key
     const current = target[key]
 
+    if (Array.isArray(item)) {
+      if (isPlainObject(current)) {
+        delete target[key]
+      }
+
+      defineLeafAccessor(target, key, path, form, version, arrayCache)
+      continue
+    }
+
     if (isLeafValue(item)) {
       if (isPlainObject(current)) {
         delete target[key]
       }
 
-      defineLeafAccessor(target, key, path, form, version)
+      defineLeafAccessor(target, key, path, form, version, arrayCache)
       continue
     }
 
@@ -115,7 +213,7 @@ function syncValuesView(
       target[key] = {}
     }
 
-    syncValuesView(target[key] as Record<string, unknown>, item, form, version, path)
+    syncValuesView(target[key] as Record<string, unknown>, item, form, version, arrayCache, path)
   }
 }
 
@@ -128,6 +226,7 @@ export function useForm<TSchema extends FormSchema, TSuccess = unknown>(
   let versionCounter = 0
   const rawValues: Record<string, unknown> = {}
   const values = reactive(rawValues) as InferFormData<TSchema>
+  const arrayCache = new WeakMap<readonly unknown[], unknown[]>()
 
   const syncValuesFromForm = () => {
     syncValuesView(
@@ -135,6 +234,7 @@ export function useForm<TSchema extends FormSchema, TSuccess = unknown>(
       form.value.values,
       form as { value: FormValuesBridge },
       version,
+      arrayCache,
     )
   }
 
diff --git a/packages/adapter-nuxt/tests/client.test.ts b/packages/adapter-nuxt/tests/client.test.ts
index 4aa1f314..3944bd53 100644
--- a/packages/adapter-nuxt/tests/client.test.ts
+++ b/packages/adapter-nuxt/tests/client.test.ts
@@ -132,7 +132,7 @@ describe('@holo-js/adapter-nuxt client', () => {
     expect(Object.getOwnPropertyDescriptor(form, 'missing')).toBeUndefined()
   })
 
-  it('preserves array and date values as native objects through the proxy', async () => {
+  it('preserves date values and exposes array contents through the proxy', async () => {
     vi.doMock('vue', () => ({
       onScopeDispose() {},
       reactive<TValue extends object>(value: TValue) {
@@ -166,8 +166,14 @@ describe('@holo-js/adapter-nuxt client', () => {
 
     expect(form.values.publishedAt).toBeInstanceOf(Date)
     expect(form.values.publishedAt.getTime()).toBe(publishedAt.getTime())
-    expect(Array.isArray(form.values.tags)).toBe(true)
-    expect(form.values.tags).toEqual(['news'])
+    const tags = form.values.tags
+    expect(Array.isArray(tags)).toBe(true)
+    expect(tags).toBeDefined()
+    if (!tags) {
+      throw new Error('Expected tags to be defined')
+    }
+
+    expect(Array.from(tags)).toEqual(['news'])
   })
 
   it('recreates the wrapped form when watched inputs change', async () => {
@@ -259,4 +265,50 @@ describe('@holo-js/adapter-nuxt client', () => {
 
     expect(form.fields.email.value).toBe('ava@example.com')
   })
+
+  it('routes array mutations through setValue so touched, dirty, and validation update', async () => {
+    vi.doMock('vue', () => ({
+      onScopeDispose() {},
+      reactive<TValue extends object>(value: TValue) {
+        return value
+      },
+      shallowRef<TValue>(value: TValue) {
+        return { value }
+      },
+      watchEffect(effect: (onCleanup: (cleanup: () => void) => void) => void) {
+        let cleanup: (() => void) | undefined
+        effect((nextCleanup) => {
+          cleanup = nextCleanup
+        })
+        return () => cleanup?.()
+      },
+    }))
+
+    const { useForm } = await import('../src/runtime/composables/forms')
+    const publishPost = schema({
+      tags: field.array(field.string().required()).required().min(1),
+    })
+
+    const form = useForm(publishPost, {
+      initialValues: {
+        tags: [],
+      },
+      validateOn: 'change',
+    })
+
+    await form.validate()
+    expect(form.errors.first('tags')).toBeDefined()
+    expect(form.fields.tags.touched).toBe(false)
+    expect(form.fields.tags.dirty).toBe(false)
+
+    form.values.tags.push('news')
+    await Promise.resolve()
+    await Promise.resolve()
+    await new Promise(resolve => setTimeout(resolve, 0))
+
+    expect(Array.from(form.values.tags)).toEqual(['news'])
+    expect(form.fields.tags.touched).toBe(true)
+    expect(form.fields.tags.dirty).toBe(true)
+    expect(form.errors.first('tags')).toBeUndefined()
+  })
 })