fix(vue-form): losing reactivity

docs/framework/vue/guides/arrays.md

@@ -14,24 +14,24 @@ with [`Index` from `solid-js`](https://www.solidjs.com/tutorial/flow_index):
 <script setup lang="ts">
 import { useForm } from '@tanstack/vue-form'
 
-const form = useForm({
+const form = useForm(() => ({
   defaultValues: {
     people: [] as Array<{ age: number; name: string }>,
   },
   onSubmit: ({ value }) => alert(JSON.stringify(value)),
-})
+}))
 </script>
 
 <template>
   <form.Field name="people">
-    <template v-slot="{ field, state }">
+    <template v-slot="{ field, value }">
       <div>
         <form.Field
-          v-for="(_, i) of field.state.value"
+          v-for="(_, i) of value()"
           :key="i"
           :name="`people[${i}].name`"
         >
-          <template v-slot="{ field: subField, state }">
+          <template v-slot="{ field: subField, meta }">
             <!-- ... -->
           </template>
         </form.Field>
@@ -52,17 +52,13 @@ This will generate the mapped slot every time you run `pushValue` on `field`:
 Finally, you can use a subfield like so:
 
 ```vue
-<form.Field
-  v-for="(_, i) of field.state.value"
-  :key="i"
-  :name="`people[${i}].name`"
->
-  <template v-slot="{ field: subField, state }">
+<form.Field v-for="(_, i) of value()" :key="i" :name="`people[${i}].name`">
+  <template v-slot="{ field: subField, value }">
     <div>
       <label>
         <div>Name for person {{ i }}</div>
         <input
-          :value="subField.state.value"
+          :value="value()"
           @input="
           (e) =>
           subField.handleChange(
@@ -82,12 +78,12 @@ Finally, you can use a subfield like so:
 <script setup lang="ts">
 import { useForm } from '@tanstack/vue-form'
 
-const form = useForm({
+const form = useForm(() => ({
   defaultValues: {
     people: [] as Array<{ age: number; name: string }>,
   },
   onSubmit: ({ value }) => alert(JSON.stringify(value)),
-})
+}))
 </script>
 
 <template>
@@ -102,19 +98,19 @@ const form = useForm({
   >
     <div>
       <form.Field name="people">
-        <template v-slot="{ field, state }">
+        <template v-slot="{ value }">
           <div>
             <form.Field
-              v-for="(_, i) of field.state.value"
+              v-for="(_, i) of value()"
               :key="i"
               :name="`people[${i}].name`"
             >
-              <template v-slot="{ field: subField, state }">
+              <template v-slot="{ field: subField, value }">
                 <div>
                   <label>
                     <div>Name for person {{ i }}</div>
                     <input
-                      :value="subField.state.value"
+                      :value="value()"
                       @input="
                         (e) =>
                           subField.handleChange(

docs/framework/vue/guides/async-initial-values.md

@@ -31,21 +31,16 @@ const { data, isLoading } = useQuery({
   },
 })
 
-const firstName = computed(() => data.value?.firstName || '')
-const lastName = computed(() => data.value?.lastName || '')
-
-const defaultValues = reactive({
-  firstName,
-  lastName,
-})
-
-const form = useForm({
-  defaultValues,
+const form = useForm(() => ({
+  defaultValues: {
+    firstName: data.value?.firstName || '',
+    lastName: data.value?.lastName || '',
+  },
   onSubmit: async ({ value }) => {
     // Do something with form data
     console.log(value)
   },
-})
+}))
 </script>
 
 <template>

docs/framework/vue/guides/basic-concepts.md

@@ -26,19 +26,19 @@ const formOpts = formOptions({
 A Form Instance is an object that represents an individual form and provides methods and properties for working with the form. You create a form instance using the `useForm` function. The function accepts an object with an `onSubmit` function, which is called when the form is submitted.
 
 ```js
-const form = useForm({
+const form = useForm(() => ({
   ...formOpts,
   onSubmit: async ({ value }) => {
     // Do something with form data
     console.log(value)
   },
-})
+}))
 ```
 
 You may also create a form instance without using `formOptions` by using the standalone `useForm` API:
 
 ```ts
-const form = useForm({
+const form = useForm(() => ({
   onSubmit: async ({ value }) => {
     // Do something with form data
     console.log(value)
@@ -48,7 +48,7 @@ const form = useForm({
     lastName: '',
     hobbies: [],
   } as Person,
-})
+}))
 ```
 
 ## Field
@@ -61,10 +61,10 @@ Example:
 <template>
   <!-- ... -->
   <form.Field name="fullName">
-    <template v-slot="{ field }">
+    <template v-slot="{ field, value }">
       <input
         :name="field.name"
-        :value="field.state.value"
+        :value="value()"
         @blur="field.handleBlur"
         @input="(e) => field.handleChange(e.target.value)"
       />
@@ -102,10 +102,10 @@ The Field API is an object provided by a scoped slot using the `v-slot` directiv
 Example:
 
 ```vue
-<template v-slot="{ field }">
+<template v-slot="{ field, value }">
   <input
     :name="field.name"
-    :value="field.state.value"
+    :value="value()"
     @blur="field.handleBlur"
     @input="(e) => field.handleChange(e.target.value)"
   />
@@ -136,13 +136,13 @@ Example:
         },
     }"
     >
-        <template v-slot="{ field }">
+        <template v-slot="{ field, value, meta }">
             <input
-                :value="field.state.value"
+                :value="value()"
                 @input="(e) => field.handleChange(e.target.value)"
                 @blur="field.handleBlur"
             />
-            <FieldInfo :field="field" />
+            <FieldInfo :meta="meta()" />
         </template>
     </form.Field>
     <!-- ... -->
@@ -166,9 +166,9 @@ Supported libraries include:
 import { useForm } from '@tanstack/vue-form'
 import { z } from 'zod'
 
-const form = useForm({
+const form = useForm(() => ({
   // ...
-})
+}))
 
 const onChangeFirstName = z.string().refine(
   async (value) => {
@@ -191,16 +191,16 @@ const onChangeFirstName = z.string().refine(
       onChangeAsync: onChangeFirstName,
     }"
   >
-    <template v-slot="{ field, state }">
+    <template v-slot="{ field, value, meta }">
       <label :htmlFor="field.name">First Name:</label>
       <input
         :id="field.name"
         :name="field.name"
-        :value="field.state.value"
+        :value="value()"
         @input="(e) => field.handleChange((e.target as HTMLInputElement).value)"
         @blur="field.handleBlur"
       />
-      <FieldInfo :state="state" />
+      <FieldInfo :meta="meta()" />
     </template>
   </form.Field>
   <!-- ... -->
@@ -249,9 +249,9 @@ Example:
       },
     }"
   >
-    <template v-slot="{ field }">
+    <template v-slot="{ field, value }">
       <input
-        :value="field.state.value"
+        :value="value()"
         @input="(e) => field.handleChange(e.target.value)"
       />
     </template>
@@ -290,13 +290,13 @@ Example:
             <div v-else>
               <div v-for="(_, i) in hobbiesField.state.value" :key="i">
                 <form.Field :name="`hobbies[${i}].name`">
-                  <template v-slot="{ field }">
+                  <template v-slot="{ field, value, meta }">
                     <div>
                       <label :for="field.name">Name:</label>
                       <input
                         :id="field.name"
                         :name="field.name"
-                        :value="field.state.value"
+                        :value="value()"
                         @blur="field.handleBlur"
                         @input="(e) => field.handleChange(e.target.value)"
                       />
@@ -306,22 +306,22 @@ Example:
                       >
                         X
                       </button>
-                      <FieldInfo :field="field" />
+                      <FieldInfo :meta="meta()" />
                     </div>
                   </template>
                 </form.Field>
                 <form.Field :name="`hobbies[${i}].description`">
-                  <template v-slot="{ field }">
+                  <template v-slot="{ field, value, meta }">
                     <div>
                       <label :for="field.name">Description:</label>
                       <input
                         :id="field.name"
                         :name="field.name"
-                        :value="field.state.value"
+                        :value="value()"
                         @blur="field.handleBlur"
                         @input="(e) => field.handleChange(e.target.value)"
                       />
-                      <FieldInfo :field="field" />
+                      <FieldInfo :meta="meta()" />
                     </div>
                   </template>
                 </form.Field>

docs/framework/vue/guides/linked-fields.md

@@ -23,24 +23,24 @@ To do this, you can add a `onChangeListenTo` property to the `confirm_password`
 <script setup lang="ts">
 import { useForm } from '@tanstack/vue-form'
 
-const form = useForm({
+const form = useForm(() => ({
   defaultValues: {
     password: '',
     confirm_password: '',
   },
   // ...
-})
+}))
 </script>
 
 <template>
   <div>
     <form @submit.prevent.stop="form.handleSubmit">
       <div>
         <form.Field name="password">
-          <template v-slot="{ field }">
+          <template v-slot="{ field, value }">
             <div>Password:</div>
             <input
-              :value="field.state.value"
+              :value="value()"
               @input="
                 (e) => field.handleChange((e.target as HTMLInputElement).value)
               "
@@ -59,15 +59,15 @@ const form = useForm({
             },
           }"
         >
-          <template v-slot="{ field }">
+          <template v-slot="{ field, value, meta }">
             <div>Confirm Password:</div>
             <input
-              :value="field.state.value"
+              :value="value()"
               @input="
                 (e) => field.handleChange((e.target as HTMLInputElement).value)
               "
             />
-            <div v-for="(err, index) in field.state.meta.errors" :key="index">
+            <div v-for="(err, index) in meta().errors" :key="index">
               {{ err }}
             </div>
           </template>

docs/framework/vue/guides/listeners.md

@@ -24,13 +24,13 @@ Events that can be "listened" to are:
 <script setup>
 import { useForm } from '@tanstack/vue-form'
 
-const form = useForm({
+const form = useForm(() => ({
   defaultValues: {
     country: '',
     province: '',
   },
   // ...
-})
+}))
 </script>
 
 <template>
@@ -44,18 +44,18 @@ const form = useForm({
         },
       }"
     >
-      <template v-slot="{ field }">
+      <template v-slot="{ field, value }">
         <input
-          :value="field.state.value"
+          :value="value()"
           @input="(e) => field.handleChange(e.target.value)"
         />
       </template>
     </form.Field>
 
     <form.Field name="province">
-      <template v-slot="{ field }">
+      <template v-slot="{ field, value }">
         <input
-          :value="field.state.value"
+          :value="value()"
           @input="(e) => field.handleChange(e.target.value)"
         />
       </template>