From f9a95843d4edff80c2b7ed203221c74178f815e0 Mon Sep 17 00:00:00 2001
From: Abdelrahman Awad <logaretm1@Gmail.com>
Date: Sun, 26 Nov 2023 18:11:00 +0200
Subject: [PATCH] feat: introduce defineField and deprecate bind API (#4497)

---
 .changeset/eight-adults-kiss.md               |   5 +
 .../components/examples/CompositionBasic.vue  |  10 +-
 .../CompositionComponentBindsBasic01.vue      |   6 +-
 .../CompositionComponentBindsBasic02.vue      |   6 +-
 .../CompositionComponentBindsBasic03.vue      |   6 +-
 .../CompositionComponentBindsBasic04.vue      |   8 +-
 .../CompositionComponentBindsBasic05.vue      |  21 +-
 .../CompositionComponentBindsBasic06.vue      |  22 --
 .../CompositionDynamicSchemaComputed.vue      |  10 +-
 .../CompositionDynamicSchemaYupLazy.vue       |  10 +-
 .../examples/CompositionHandlingForms01.vue   |  16 +-
 .../examples/CompositionHandlingForms02.vue   |  30 +--
 .../examples/CompositionHandlingForms03.vue   |  32 +--
 .../examples/CompositionHandlingForms04.vue   |  34 +--
 .../examples/CompositionHandlingForms05.vue   |  30 +--
 .../examples/CompositionHandlingForms06.vue   |  10 +-
 .../examples/CompositionHandlingForms07.vue   |  10 +-
 .../examples/CompositionHandlingForms08.vue   |  40 +--
 .../examples/CompositionHandlingForms09.vue   |  38 +--
 .../examples/CompositionHandlingForms10.vue   |  22 +-
 .../examples/CompositionHandlingForms11.vue   |  10 +-
 .../examples/CompositionHandlingForms12.vue   |  26 +-
 .../examples/CompositionHandlingForms13.vue   |  10 +-
 .../examples/CompositionHandlingForms14.vue   |  10 +-
 .../examples/CompositionInputBindsBasic01.vue |   6 +-
 .../examples/CompositionInputBindsBasic02.vue |   6 +-
 .../examples/CompositionInputBindsBasic03.vue |   8 +-
 .../examples/CompositionNested01.vue          |  10 +-
 .../examples/CompositionNested02.vue          |  10 +-
 .../examples/CompositionNested03.vue          |  10 +-
 .../examples/CompositionNested05.vue          |  10 +-
 .../examples/CompositionValibotBasic.vue      |  10 +-
 .../examples/CompositionValidateFnBasic.vue   |   6 +-
 .../examples/CompositionYupBasic.vue          |  12 +-
 .../examples/CompositionZodBasic.vue          |  12 +-
 .../guide/composition-api/custom-inputs.mdx   |  20 +-
 .../guide/composition-api/getting-started.mdx |  59 ++---
 packages/i18n/package.json                    |   2 +-
 packages/joi/package.json                     |   2 +-
 packages/joi/tests/joi.spec.ts                |  14 +-
 packages/nuxt/package.json                    |   2 +-
 packages/rules/package.json                   |   2 +-
 packages/rules/tests/toTypedSchema.spec.ts    |   5 +-
 packages/valibot/package.json                 |   2 +-
 packages/valibot/tests/valibot.spec.ts        |  10 +-
 packages/vee-validate/package.json            |   2 +-
 packages/vee-validate/src/types/common.ts     |   4 +-
 packages/vee-validate/src/types/forms.ts      | 203 ++++++++-------
 packages/vee-validate/src/useForm.ts          | 198 +++++++-------
 .../vee-validate/tests/useFieldArray.spec.ts  |   8 +-
 packages/vee-validate/tests/useForm.spec.ts   | 244 ++++++------------
 packages/yup/package.json                     |   2 +-
 packages/yup/tests/yup.spec.ts                |  10 +-
 packages/zod/package.json                     |   2 +-
 packages/zod/tests/zod.spec.ts                |  15 +-
 55 files changed, 630 insertions(+), 698 deletions(-)
 create mode 100644 .changeset/eight-adults-kiss.md
 delete mode 100644 docs/src/components/examples/CompositionComponentBindsBasic06.vue

diff --git a/.changeset/eight-adults-kiss.md b/.changeset/eight-adults-kiss.md
new file mode 100644
index 000000000..b6b83b56f
--- /dev/null
+++ b/.changeset/eight-adults-kiss.md
@@ -0,0 +1,5 @@
+---
+'vee-validate': patch
+---
+
+feat: add label support to defineField closes #4530
diff --git a/docs/src/components/examples/CompositionBasic.vue b/docs/src/components/examples/CompositionBasic.vue
index d900aba4f..3f3acdce2 100644
--- a/docs/src/components/examples/CompositionBasic.vue
+++ b/docs/src/components/examples/CompositionBasic.vue
@@ -7,12 +7,12 @@ const schema = yup.object({
   password: yup.string().min(6).required(),
 });
 
-const { defineInputBinds, errors, handleSubmit } = useForm({
+const { defineField, errors, handleSubmit } = useForm({
   validationSchema: schema,
 });
 
-const email = defineInputBinds('email');
-const password = defineInputBinds('password');
+const [email, emailAttrs] = defineField('email');
+const [password, passwordAttrs] = defineField('password');
 
 const onSubmit = handleSubmit(values => {
   alert(JSON.stringify(values, null, 2));
@@ -21,10 +21,10 @@ const onSubmit = handleSubmit(values => {
 
 <template>
   <form @submit="onSubmit">
-    <input v-bind="email" name="email" type="email" />
+    <input v-model="email" v-bind="emailAttrs" name="email" type="email" />
     <span>{{ errors.email }}</span>
 
-    <input v-bind="password" name="password" type="password" />
+    <input v-model="password" v-bind="passwordAttrs" name="password" type="password" />
     <span>{{ errors.password }}</span>
 
     <button>Submit</button>
diff --git a/docs/src/components/examples/CompositionComponentBindsBasic01.vue b/docs/src/components/examples/CompositionComponentBindsBasic01.vue
index 90db5fceb..eefd1217f 100644
--- a/docs/src/components/examples/CompositionComponentBindsBasic01.vue
+++ b/docs/src/components/examples/CompositionComponentBindsBasic01.vue
@@ -2,13 +2,13 @@
 import { useForm } from 'vee-validate';
 import CustomInput from './CustomInput.vue';
 
-const { values, defineComponentBinds } = useForm();
+const { values, defineField } = useForm();
 
-const email = defineComponentBinds('email');
+const [email, emailProps] = defineField('email');
 </script>
 
 <template>
-  <CustomInput v-bind="email" />
+  <CustomInput v-model="email" v-bind="emailProps" />
 
   <pre>values: {{ values }}</pre>
 </template>
diff --git a/docs/src/components/examples/CompositionComponentBindsBasic02.vue b/docs/src/components/examples/CompositionComponentBindsBasic02.vue
index 80291ea1e..6cbf59cf4 100644
--- a/docs/src/components/examples/CompositionComponentBindsBasic02.vue
+++ b/docs/src/components/examples/CompositionComponentBindsBasic02.vue
@@ -3,17 +3,17 @@ import { useForm } from 'vee-validate';
 import * as yup from 'yup';
 import CustomInput from './CustomInput.vue';
 
-const { values, errors, defineComponentBinds } = useForm({
+const { values, errors, defineField } = useForm({
   validationSchema: yup.object({
     email: yup.string().email().required(),
   }),
 });
 
-const email = defineComponentBinds('email');
+const [email, emailProps] = defineField('email');
 </script>
 
 <template>
-  <CustomInput v-bind="email" />
+  <CustomInput v-model="email" v-bind="emailProps" />
 
   <pre>errors: {{ errors }}</pre>
   <pre>values: {{ values }}</pre>
diff --git a/docs/src/components/examples/CompositionComponentBindsBasic03.vue b/docs/src/components/examples/CompositionComponentBindsBasic03.vue
index 299da4fc1..c452b6824 100644
--- a/docs/src/components/examples/CompositionComponentBindsBasic03.vue
+++ b/docs/src/components/examples/CompositionComponentBindsBasic03.vue
@@ -3,19 +3,19 @@ import { useForm } from 'vee-validate';
 import * as yup from 'yup';
 import CustomInput from './CustomInput.vue';
 
-const { values, errors, defineComponentBinds } = useForm({
+const { values, errors, defineField } = useForm({
   validationSchema: yup.object({
     email: yup.string().email().required(),
   }),
 });
 
-const email = defineComponentBinds('email', {
+const [email, emailProps] = defineField('email', {
   validateOnValueUpdate: false,
 });
 </script>
 
 <template>
-  <CustomInput v-bind="email" />
+  <CustomInput v-model="email" v-bind="emailProps" />
   <div>{{ errors.email }}</div>
 
   <pre>values: {{ values }}</pre>
diff --git a/docs/src/components/examples/CompositionComponentBindsBasic04.vue b/docs/src/components/examples/CompositionComponentBindsBasic04.vue
index 9d2ff9450..351a54c9e 100644
--- a/docs/src/components/examples/CompositionComponentBindsBasic04.vue
+++ b/docs/src/components/examples/CompositionComponentBindsBasic04.vue
@@ -3,21 +3,21 @@ import { useForm } from 'vee-validate';
 import * as yup from 'yup';
 import CustomInput from './CustomInput.vue';
 
-const { values, errors, defineComponentBinds } = useForm({
+const { values, errors, defineField } = useForm({
   validationSchema: yup.object({
     email: yup.string().email().required(),
   }),
 });
 
-const email = defineComponentBinds('email', {
-  mapProps: state => ({
+const [email, emailProps] = defineField('email', {
+  props: state => ({
     error: state.errors[0],
   }),
 });
 </script>
 
 <template>
-  <CustomInput v-bind="email" />
+  <CustomInput v-model="email" v-bind="emailProps" />
 
   <pre>values: {{ values }}</pre>
   <pre>errors: {{ errors }}</pre>
diff --git a/docs/src/components/examples/CompositionComponentBindsBasic05.vue b/docs/src/components/examples/CompositionComponentBindsBasic05.vue
index 40f05f85f..5bbef5d79 100644
--- a/docs/src/components/examples/CompositionComponentBindsBasic05.vue
+++ b/docs/src/components/examples/CompositionComponentBindsBasic05.vue
@@ -1,39 +1,24 @@
 <script setup>
 import { useForm } from 'vee-validate';
 import * as yup from 'yup';
-import CustomInput from './CustomInput.vue';
 
-const { values, errors, defineInputBinds, defineComponentBinds } = useForm({
+const { values, errors, defineField } = useForm({
   validationSchema: yup.object({
     email: yup.string().email().required(),
-    emailComponent: yup.string().email().required(),
   }),
 });
 
-const email = defineInputBinds('email', state => {
-  return {
-    // validate aggressively as long as there are errors on the input
-    validateOnInput: state.errors.length > 0,
-  };
-});
-
-const emailComponent = defineComponentBinds('emailComponent', state => {
+const [email, emailAttrs] = defineField('email', state => {
   return {
     // validate aggressively as long as there are errors on the input
     validateOnModelUpdate: state.errors.length > 0,
-    validateOnBlur: true,
-    props: {
-      error: state.errors[0],
-    },
   };
 });
 </script>
 
 <template>
-  <input v-bind="email" />
+  <input v-model="email" v-bind="emailAttrs" />
   <div>{{ errors.email }}</div>
 
-  <CustomInput v-bind="emailComponent" />
-
   <pre>values: {{ values }}</pre>
 </template>
diff --git a/docs/src/components/examples/CompositionComponentBindsBasic06.vue b/docs/src/components/examples/CompositionComponentBindsBasic06.vue
deleted file mode 100644
index 246d8dcfe..000000000
--- a/docs/src/components/examples/CompositionComponentBindsBasic06.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<script setup>
-import { useForm } from 'vee-validate';
-import * as yup from 'yup';
-import CustomInput from './CustomInput.vue';
-
-const { values, errors, defineComponentBinds } = useForm({
-  validationSchema: yup.object({
-    email: yup.string().email().required(),
-  }),
-});
-
-const email = defineComponentBinds('email', {
-  model: 'value',
-});
-</script>
-
-<template>
-  <CustomInput v-bind="email" />
-
-  <pre>values: {{ values }}</pre>
-  <pre>errors: {{ errors }}</pre>
-</template>
diff --git a/docs/src/components/examples/CompositionDynamicSchemaComputed.vue b/docs/src/components/examples/CompositionDynamicSchemaComputed.vue
index 552ddddcf..a47172de1 100644
--- a/docs/src/components/examples/CompositionDynamicSchemaComputed.vue
+++ b/docs/src/components/examples/CompositionDynamicSchemaComputed.vue
@@ -6,22 +6,22 @@ import * as yup from 'yup';
 
 const limit = ref(5);
 
-const { errors, defineInputBinds } = useForm({
+const { errors, defineField } = useForm({
   validationSchema: computed(() =>
     toTypedSchema(
       yup.object({
         content: yup.string().max(limit.value),
-      })
-    )
+      }),
+    ),
   ),
 });
 
-const content = defineInputBinds('content');
+const [content, contentAttrs] = defineField('content');
 </script>
 
 <template>
   <input v-model.number="limit" />
 
-  <input v-bind="content" />
+  <input v-model="content" v-bind="contentAttrs" />
   <div>{{ errors.content }}</div>
 </template>
diff --git a/docs/src/components/examples/CompositionDynamicSchemaYupLazy.vue b/docs/src/components/examples/CompositionDynamicSchemaYupLazy.vue
index 1c4367624..cd59a3bbf 100644
--- a/docs/src/components/examples/CompositionDynamicSchemaYupLazy.vue
+++ b/docs/src/components/examples/CompositionDynamicSchemaYupLazy.vue
@@ -6,22 +6,22 @@ import * as yup from 'yup';
 
 const limit = ref(5);
 
-const { errors, defineInputBinds } = useForm({
+const { errors, defineField } = useForm({
   validationSchema: toTypedSchema(
     yup.lazy(() =>
       yup.object({
         content: yup.string().max(limit.value),
-      })
-    )
+      }),
+    ),
   ),
 });
 
-const content = defineInputBinds('content');
+const [content, contentAttrs] = defineField('content');
 </script>
 
 <template>
   <input v-model.number="limit" />
 
-  <input v-bind="content" />
+  <input v-model="content" v-bind="contentAttrs" />
   <div>{{ errors.content }}</div>
 </template>
diff --git a/docs/src/components/examples/CompositionHandlingForms01.vue b/docs/src/components/examples/CompositionHandlingForms01.vue
index 3ddfb854f..b35f248b1 100644
--- a/docs/src/components/examples/CompositionHandlingForms01.vue
+++ b/docs/src/components/examples/CompositionHandlingForms01.vue
@@ -1,13 +1,13 @@
-<template>
-  <input v-bind="name" />
-
-  <button :disabled="!meta.touched">Submit</button>
-</template>
-
 <script setup>
 import { useForm } from 'vee-validate';
 
-const { meta, defineInputBinds } = useForm();
+const { meta, defineField } = useForm();
 
-const name = defineInputBinds('name');
+const [name, nameAttrs] = defineField('name');
 </script>
+
+<template>
+  <input v-model="name" v-bind="nameAttrs" />
+
+  <button :disabled="!meta.touched">Submit</button>
+</template>
diff --git a/docs/src/components/examples/CompositionHandlingForms02.vue b/docs/src/components/examples/CompositionHandlingForms02.vue
index 345cb0990..cf7c3fecb 100644
--- a/docs/src/components/examples/CompositionHandlingForms02.vue
+++ b/docs/src/components/examples/CompositionHandlingForms02.vue
@@ -1,20 +1,8 @@
-<template>
-  <form @submit="onSubmit">
-    <input type="email" v-bind="email" />
-    <div>{{ errors.email }}</div>
-
-    <input type="password" v-bind="password" />
-    <div>{{ errors.password }}</div>
-
-    <button>Submit</button>
-  </form>
-</template>
-
 <script setup>
 import { useForm } from 'vee-validate';
 import * as yup from 'yup';
 
-const { errors, handleSubmit, defineInputBinds } = useForm({
+const { errors, handleSubmit, defineField } = useForm({
   validationSchema: yup.object({
     email: yup.string().email().required(),
     password: yup.string().min(6).required(),
@@ -27,6 +15,18 @@ const onSubmit = handleSubmit(values => {
   alert(JSON.stringify(values, null, 2));
 });
 
-const email = defineInputBinds('email');
-const password = defineInputBinds('password');
+const [email, emailAttrs] = defineField('email');
+const [password, passwordAttrs] = defineField('password');
 </script>
+
+<template>
+  <form @submit="onSubmit">
+    <input type="email" v-model="email" v-bind="emailAttrs" />
+    <div>{{ errors.email }}</div>
+
+    <input type="password" v-model="password" v-bind="passwordAttrs" />
+    <div>{{ errors.password }}</div>
+
+    <button>Submit</button>
+  </form>
+</template>
diff --git a/docs/src/components/examples/CompositionHandlingForms03.vue b/docs/src/components/examples/CompositionHandlingForms03.vue
index 097b5645d..94ea73a27 100644
--- a/docs/src/components/examples/CompositionHandlingForms03.vue
+++ b/docs/src/components/examples/CompositionHandlingForms03.vue
@@ -1,20 +1,8 @@
-<template>
-  <form @submit="onSubmit">
-    <input v-bind="email" name="email" type="email" />
-    <span>{{ errors.email }}</span>
-
-    <input v-bind="password" name="password" type="password" />
-    <span>{{ errors.password }}</span>
-
-    <button>Submit</button>
-  </form>
-</template>
-
 <script setup>
 import { useForm } from 'vee-validate';
 import * as yup from 'yup';
 
-const { errors, handleSubmit, defineInputBinds } = useForm({
+const { errors, handleSubmit, defineField } = useForm({
   validationSchema: yup.object({
     email: yup.string().email().required(),
     password: yup.string().min(6).required(),
@@ -32,13 +20,25 @@ const onSubmit = handleSubmit(
       behavior: 'smooth',
     });
     el.focus();
-  }
+  },
 );
 
-const email = defineInputBinds('email');
-const password = defineInputBinds('password');
+const [email, emailAttrs] = defineField('email');
+const [password, passwordAttrs] = defineField('password');
 </script>
 
+<template>
+  <form @submit="onSubmit">
+    <input v-model="email" v-bind="emailAttrs" name="email" type="email" />
+    <span>{{ errors.email }}</span>
+
+    <input v-model="password" v-bind="passwordAttrs" name="password" type="password" />
+    <span>{{ errors.password }}</span>
+
+    <button>Submit</button>
+  </form>
+</template>
+
 <style>
 input,
 button {
diff --git a/docs/src/components/examples/CompositionHandlingForms04.vue b/docs/src/components/examples/CompositionHandlingForms04.vue
index 392190c08..97c272197 100644
--- a/docs/src/components/examples/CompositionHandlingForms04.vue
+++ b/docs/src/components/examples/CompositionHandlingForms04.vue
@@ -1,21 +1,7 @@
-<template>
-  <form @submit="onSubmit">
-    <input type="email" v-bind="email" />
-    <span>{{ errors.email }}</span>
-
-    <input type="password" v-bind="password" />
-    <span>{{ errors.password }}</span>
-
-    <button :disabled="isSubmitting">
-      {{ isSubmitting ? 'Submitting...' : 'Submit' }}
-    </button>
-  </form>
-</template>
-
 <script setup>
 import { useForm } from 'vee-validate';
 
-const { handleSubmit, defineInputBinds, isSubmitting, errors } = useForm();
+const { handleSubmit, defineField, isSubmitting, errors } = useForm();
 
 const onSubmit = handleSubmit(values => {
   // Simulates a 2 second delay
@@ -27,6 +13,20 @@ const onSubmit = handleSubmit(values => {
   });
 });
 
-const email = defineInputBinds('email');
-const password = defineInputBinds('password');
+const [email, emailAttrs] = defineField('email');
+const [password, passwordAttrs] = defineField('password');
 </script>
+
+<template>
+  <form @submit="onSubmit">
+    <input type="email" v-model="email" v-bind="emailAttrs" />
+    <span>{{ errors.email }}</span>
+
+    <input type="password" v-model="password" v-bind="passwordAttrs" />
+    <span>{{ errors.password }}</span>
+
+    <button :disabled="isSubmitting">
+      {{ isSubmitting ? 'Submitting...' : 'Submit' }}
+    </button>
+  </form>
+</template>
diff --git a/docs/src/components/examples/CompositionHandlingForms05.vue b/docs/src/components/examples/CompositionHandlingForms05.vue
index 77185402b..1f0bfa800 100644
--- a/docs/src/components/examples/CompositionHandlingForms05.vue
+++ b/docs/src/components/examples/CompositionHandlingForms05.vue
@@ -1,11 +1,24 @@
+<script setup>
+import { useForm } from 'vee-validate';
+
+const { handleSubmit, defineField, submitCount, errors } = useForm();
+
+const onSubmit = handleSubmit(values => {
+  console.log('Submitted', JSON.stringify(values, null, 2));
+});
+
+const [email, emailAttrs] = defineField('email');
+const [password, passwordAttrs] = defineField('password');
+</script>
+
 <template>
   <form @submit="onSubmit">
     <pre>Submit count: {{ submitCount }}</pre>
 
-    <input type="email" v-bind="email" />
+    <input type="email" v-model="email" v-bind="emailAttrs" />
     <span>{{ errors.email }}</span>
 
-    <input type="password" v-bind="password" />
+    <input type="password" v-model="password" v-bind="passwordAttrs" />
     <span>{{ errors.password }}</span>
 
     <button :disabled="submitCount > 5">
@@ -13,16 +26,3 @@
     </button>
   </form>
 </template>
-
-<script setup>
-import { useForm } from 'vee-validate';
-
-const { handleSubmit, defineInputBinds, submitCount, errors } = useForm();
-
-const onSubmit = handleSubmit(values => {
-  console.log('Submitted', JSON.stringify(values, null, 2));
-});
-
-const email = defineInputBinds('email');
-const password = defineInputBinds('password');
-</script>
diff --git a/docs/src/components/examples/CompositionHandlingForms06.vue b/docs/src/components/examples/CompositionHandlingForms06.vue
index cb370349e..5c12a95fa 100644
--- a/docs/src/components/examples/CompositionHandlingForms06.vue
+++ b/docs/src/components/examples/CompositionHandlingForms06.vue
@@ -1,8 +1,8 @@
 <template>
   <form @submit="onSubmit">
-    <input type="email" v-bind="email" />
+    <input type="email" v-model="email" v-bind="emailAttrs" />
 
-    <input type="password" v-bind="password" />
+    <input type="password" v-model="password" v-bind="passwordAttrs" />
 
     <button>Submit</button>
   </form>
@@ -11,7 +11,7 @@
 <script setup>
 import { useForm } from 'vee-validate';
 
-const { handleSubmit, defineInputBinds } = useForm({
+const { handleSubmit, defineField } = useForm({
   initialValues: {
     email: 'test@example.com',
     password: 'p@$$w0rd',
@@ -22,6 +22,6 @@ const onSubmit = handleSubmit(values => {
   console.log(JSON.stringify(values, null, 2));
 });
 
-const email = defineInputBinds('email');
-const password = defineInputBinds('password');
+const [email, emailAttrs] = defineField('email');
+const [password, passwordAttrs] = defineField('password');
 </script>
diff --git a/docs/src/components/examples/CompositionHandlingForms07.vue b/docs/src/components/examples/CompositionHandlingForms07.vue
index faf1ba13c..f6cdc3f58 100644
--- a/docs/src/components/examples/CompositionHandlingForms07.vue
+++ b/docs/src/components/examples/CompositionHandlingForms07.vue
@@ -1,7 +1,7 @@
 <template>
-  <input type="email" v-bind="email" />
+  <input type="email" v-model="email" v-bind="emailAttrs" />
 
-  <input type="password" v-bind="password" />
+  <input type="password" v-model="password" v-bind="passwordAttrs" />
 
   <button @click="updateValues">Update values</button>
 </template>
@@ -9,7 +9,7 @@
 <script setup>
 import { useForm } from 'vee-validate';
 
-const { defineInputBinds, setFieldValue, setValues } = useForm();
+const { defineField, setFieldValue, setValues } = useForm();
 
 function updateValues() {
   // set a single field value
@@ -22,6 +22,6 @@ function updateValues() {
   });
 }
 
-const email = defineInputBinds('email');
-const password = defineInputBinds('password');
+const [email, emailAttrs] = defineField('email');
+const [password, passwordAttrs] = defineField('password');
 </script>
diff --git a/docs/src/components/examples/CompositionHandlingForms08.vue b/docs/src/components/examples/CompositionHandlingForms08.vue
index 7e52b47b0..520d48a03 100644
--- a/docs/src/components/examples/CompositionHandlingForms08.vue
+++ b/docs/src/components/examples/CompositionHandlingForms08.vue
@@ -1,12 +1,29 @@
+<script setup>
+import { useForm } from 'vee-validate';
+import * as yup from 'yup';
+
+const { resetForm, defineField, meta } = useForm({
+  validationSchema: yup.object({
+    name: yup.string().required(),
+    email: yup.string().email().required(),
+    password: yup.string().min(6).required(),
+  }),
+});
+
+const [email, emailAttrs] = defineField('email');
+const [name, nameAttrs] = defineField('name');
+const [password, passwordAttrs] = defineField('password');
+</script>
+
 <template>
   <form @submit="">
-    <input v-bind="name" />
+    <input v-model="name" v-bind="nameAttrs" />
     {{ errors.name }}
 
-    <input type="email" v-bind="email" />
+    <input type="email" v-model="email" v-bind="emailAttrs" />
     {{ errors.email }}
 
-    <input type="password" v-bind="password" />
+    <input type="password" v-model="password" v-bind="passwordAttrs" />
     {{ errors.password }}
 
     <button type="button" @click="resetForm()">Reset</button>
@@ -20,20 +37,3 @@
     <pre>{{ meta }}</pre>
   </form>
 </template>
-
-<script setup>
-import { useForm } from 'vee-validate';
-import * as yup from 'yup';
-
-const { resetForm, defineInputBinds, meta } = useForm({
-  validationSchema: yup.object({
-    name: yup.string().required(),
-    email: yup.string().email().required(),
-    password: yup.string().min(6).required(),
-  }),
-});
-
-const email = defineInputBinds('email');
-const name = defineInputBinds('name');
-const password = defineInputBinds('password');
-</script>
diff --git a/docs/src/components/examples/CompositionHandlingForms09.vue b/docs/src/components/examples/CompositionHandlingForms09.vue
index 2c31b1898..7ec4ac5b8 100644
--- a/docs/src/components/examples/CompositionHandlingForms09.vue
+++ b/docs/src/components/examples/CompositionHandlingForms09.vue
@@ -1,23 +1,8 @@
-<template>
-  <form @submit="onSubmit">
-    <input v-bind="name" />
-    {{ errors.name }}
-
-    <input type="email" v-bind="email" />
-    {{ errors.email }}
-
-    <input type="password" v-bind="password" />
-    {{ errors.password }}
-
-    <button>Submit</button>
-  </form>
-</template>
-
 <script setup>
 import { useForm } from 'vee-validate';
 import * as yup from 'yup';
 
-const { defineInputBinds, errors, handleSubmit } = useForm({
+const { defineField, errors, handleSubmit } = useForm({
   validationSchema: yup.object({
     name: yup.string().required(),
     email: yup.string().email().required(),
@@ -25,9 +10,9 @@ const { defineInputBinds, errors, handleSubmit } = useForm({
   }),
 });
 
-const email = defineInputBinds('email');
-const name = defineInputBinds('name');
-const password = defineInputBinds('password');
+const [email, emailAttrs] = defineField('email');
+const [name, nameAttrs] = defineField('name');
+const [password, passwordAttrs] = defineField('password');
 
 const onSubmit = handleSubmit((values, { resetForm }) => {
   console.log(values); // send data to API
@@ -35,3 +20,18 @@ const onSubmit = handleSubmit((values, { resetForm }) => {
   resetForm();
 });
 </script>
+
+<template>
+  <form @submit="onSubmit">
+    <input v-model="name" v-bind="nameAttrs" />
+    {{ errors.name }}
+
+    <input type="email" v-model="email" v-bind="emailAttrs" />
+    {{ errors.email }}
+
+    <input type="password" v-model="password" v-bind="passwordAttrs" />
+    {{ errors.password }}
+
+    <button>Submit</button>
+  </form>
+</template>
diff --git a/docs/src/components/examples/CompositionHandlingForms10.vue b/docs/src/components/examples/CompositionHandlingForms10.vue
index 11d0e7771..14985e6db 100644
--- a/docs/src/components/examples/CompositionHandlingForms10.vue
+++ b/docs/src/components/examples/CompositionHandlingForms10.vue
@@ -1,21 +1,21 @@
-<template>
-  <form @submit="onSubmit">
-    <input v-bind="email" />
-    {{ errorBag.email }}
-
-    <button>Submit</button>
-  </form>
-</template>
-
 <script setup>
 import { useForm } from 'vee-validate';
 import * as yup from 'yup';
 
-const { defineInputBinds, errorBag } = useForm({
+const { defineField, errorBag } = useForm({
   validationSchema: yup.object({
     email: yup.string().email().required().min(6),
   }),
 });
 
-const email = defineInputBinds('email');
+const [email, emailAttrs] = defineField('email');
 </script>
+
+<template>
+  <form @submit="onSubmit">
+    <input v-model="email" v-bind="emailAttrs" />
+    {{ errorBag.email }}
+
+    <button>Submit</button>
+  </form>
+</template>
diff --git a/docs/src/components/examples/CompositionHandlingForms11.vue b/docs/src/components/examples/CompositionHandlingForms11.vue
index 8c6626708..849c56284 100644
--- a/docs/src/components/examples/CompositionHandlingForms11.vue
+++ b/docs/src/components/examples/CompositionHandlingForms11.vue
@@ -1,9 +1,9 @@
 <template>
   <form @submit="onSubmit">
-    <input type="email" v-bind="email" />
+    <input type="email" v-model="email" v-bind="emailAttrs" />
     {{ errors.email }}
 
-    <input type="password" v-bind="password" />
+    <input type="password" v-model="password" v-bind="passwordAttrs" />
     {{ errors.password }}
 
     <button>Login</button>
@@ -14,15 +14,15 @@
 import { useForm } from 'vee-validate';
 import * as yup from 'yup';
 
-const { defineInputBinds, handleSubmit, errors, setFieldError } = useForm({
+const { defineField, handleSubmit, errors, setFieldError } = useForm({
   validationSchema: yup.object({
     email: yup.string().email().required(),
     password: yup.string().min(6).required(),
   }),
 });
 
-const email = defineInputBinds('email');
-const password = defineInputBinds('password');
+const [email, emailAttrs] = defineField('email');
+const [password, passwordAttrs] = defineField('password');
 
 const onSubmit = handleSubmit((values, { setFieldError }) => {
   console.log(values); // send data to API
diff --git a/docs/src/components/examples/CompositionHandlingForms12.vue b/docs/src/components/examples/CompositionHandlingForms12.vue
index 09c8b4342..5c4afbd8c 100644
--- a/docs/src/components/examples/CompositionHandlingForms12.vue
+++ b/docs/src/components/examples/CompositionHandlingForms12.vue
@@ -1,13 +1,3 @@
-<template>
-  <form @submit="onSubmit">
-    <input name="name" v-bind="name" />
-
-    <textarea name="address" v-bind="address"></textarea>
-
-    <button>Submit</button>
-  </form>
-</template>
-
 <script setup>
 import { useForm } from 'vee-validate';
 import * as yup from 'yup';
@@ -19,14 +9,24 @@ const initialUserData = {
   createdAt: Date.now(),
 };
 
-const { defineInputBinds, handleSubmit } = useForm({
+const { defineField, handleSubmit } = useForm({
   initialValues: initialUserData,
 });
 
-const name = defineInputBinds('name');
-const address = defineInputBinds('address');
+const [name, nameAttrs] = defineField('name');
+const [address, addressAttrs] = defineField('address');
 
 const onSubmit = handleSubmit.withControlled(values => {
   alert(JSON.stringify(values, null, 2));
 });
 </script>
+
+<template>
+  <form @submit="onSubmit">
+    <input name="name" v-model="name" v-bind="nameAttrs" />
+
+    <textarea name="address" v-model="address" v-bind="addressAttrs"></textarea>
+
+    <button>Submit</button>
+  </form>
+</template>
diff --git a/docs/src/components/examples/CompositionHandlingForms13.vue b/docs/src/components/examples/CompositionHandlingForms13.vue
index 18ed5dc57..2d4729872 100644
--- a/docs/src/components/examples/CompositionHandlingForms13.vue
+++ b/docs/src/components/examples/CompositionHandlingForms13.vue
@@ -2,23 +2,23 @@
 import { useForm } from 'vee-validate';
 import * as yup from 'yup';
 
-const { errors, submitForm, defineInputBinds } = useForm({
+const { errors, submitForm, defineField } = useForm({
   validationSchema: yup.object({
     email: yup.string().email().required(),
     password: yup.string().min(6).required(),
   }),
 });
 
-const email = defineInputBinds('email');
-const password = defineInputBinds('password');
+const [email, emailAttrs] = defineField('email');
+const [password, passwordAttrs] = defineField('password');
 </script>
 
 <template>
   <form action="/v4/submit-target/" method="get" target="_blank" @submit="submitForm">
-    <input name="email" v-bind="email" />
+    <input name="email" v-model="email" v-bind="emailAttrs" />
     <span>{{ errors.email }}</span>
 
-    <input name="password" v-bind="password" />
+    <input name="password" v-model="password" v-bind="passwordAttrs" />
     <span>{{ errors.password }}</span>
 
     <button>Submit</button>
diff --git a/docs/src/components/examples/CompositionHandlingForms14.vue b/docs/src/components/examples/CompositionHandlingForms14.vue
index ea722ae21..5afbb8cb6 100644
--- a/docs/src/components/examples/CompositionHandlingForms14.vue
+++ b/docs/src/components/examples/CompositionHandlingForms14.vue
@@ -17,15 +17,15 @@ async function fetchData() {
   });
 }
 
-const { errors, resetForm, handleSubmit, defineInputBinds } = useForm({
+const { errors, resetForm, handleSubmit, defineField } = useForm({
   validationSchema: yup.object({
     email: yup.string().email().required(),
     name: yup.string().required(),
   }),
 });
 
-const email = defineInputBinds('email');
-const name = defineInputBinds('name');
+const [email, emailAttrs] = defineField('email');
+const [name, nameAttrs] = defineField('name');
 
 // Fetch data on mounted
 onMounted(async () => {
@@ -41,10 +41,10 @@ const onSubmit = handleSubmit(values => {
 
 <template>
   <form @submit="onSubmit">
-    <input name="email" v-bind="email" />
+    <input name="email" v-model="email" v-bind="emailAttrs" />
     <span>{{ errors.email }}</span>
 
-    <input name="name" v-bind="name" />
+    <input name="name" v-model="name" v-bind="nameAttrs" />
     <span>{{ errors.name }}</span>
 
     <button>Submit</button>
diff --git a/docs/src/components/examples/CompositionInputBindsBasic01.vue b/docs/src/components/examples/CompositionInputBindsBasic01.vue
index 87a43e04c..7546e5a81 100644
--- a/docs/src/components/examples/CompositionInputBindsBasic01.vue
+++ b/docs/src/components/examples/CompositionInputBindsBasic01.vue
@@ -1,13 +1,13 @@
 <script setup>
 import { useForm } from 'vee-validate';
 
-const { values, defineInputBinds } = useForm();
+const { values, defineField } = useForm();
 
-const email = defineInputBinds('email');
+const [email, emailAttrs] = defineField('email');
 </script>
 
 <template>
-  <input v-bind="email" type="text" />
+  <input v-model="email" v-bind="emailAttrs" type="text" />
 
   <pre>values: {{ values }}</pre>
 </template>
diff --git a/docs/src/components/examples/CompositionInputBindsBasic02.vue b/docs/src/components/examples/CompositionInputBindsBasic02.vue
index 621d8474a..e19bd71b6 100644
--- a/docs/src/components/examples/CompositionInputBindsBasic02.vue
+++ b/docs/src/components/examples/CompositionInputBindsBasic02.vue
@@ -2,17 +2,17 @@
 import { useForm } from 'vee-validate';
 import * as yup from 'yup';
 
-const { values, errors, defineInputBinds } = useForm({
+const { values, errors, defineField } = useForm({
   validationSchema: yup.object({
     email: yup.string().email().required(),
   }),
 });
 
-const email = defineInputBinds('email');
+const [email, emailAttrs] = defineField('email');
 </script>
 
 <template>
-  <input v-bind="email" />
+  <input v-model="email" v-bind="emailAttrs" />
 
   <pre>values: {{ values }}</pre>
   <pre>errors: {{ errors }}</pre>
diff --git a/docs/src/components/examples/CompositionInputBindsBasic03.vue b/docs/src/components/examples/CompositionInputBindsBasic03.vue
index 5cb0abc61..2683113e5 100644
--- a/docs/src/components/examples/CompositionInputBindsBasic03.vue
+++ b/docs/src/components/examples/CompositionInputBindsBasic03.vue
@@ -2,19 +2,19 @@
 import { useForm } from 'vee-validate';
 import * as yup from 'yup';
 
-const { values, errors, defineInputBinds } = useForm({
+const { values, errors, defineField } = useForm({
   validationSchema: yup.object({
     email: yup.string().email().required(),
   }),
 });
 
-const email = defineInputBinds('email', {
-  validateOnInput: true,
+const [email, emailAttrs] = defineField('email', {
+  validateOnModelUpdate: false,
 });
 </script>
 
 <template>
-  <input v-bind="email" />
+  <input v-model="email" v-bind="emailAttrs" />
 
   <pre>values: {{ values }}</pre>
   <pre>errors: {{ errors }}</pre>
diff --git a/docs/src/components/examples/CompositionNested01.vue b/docs/src/components/examples/CompositionNested01.vue
index a907621ff..c145ea7cb 100644
--- a/docs/src/components/examples/CompositionNested01.vue
+++ b/docs/src/components/examples/CompositionNested01.vue
@@ -1,7 +1,7 @@
 <template>
   <form @submit="onSubmit">
-    <input v-bind="twitter" type="url" placeholder="twitter" />
-    <input v-bind="github" type="url" placeholder="github" />
+    <input v-model="twitter" type="url" placeholder="twitter" />
+    <input v-model="github" type="url" placeholder="github" />
 
     <button>Submit</button>
   </form>
@@ -10,11 +10,11 @@
 <script setup>
 import { useForm } from 'vee-validate';
 
-const { handleSubmit, defineInputBinds } = useForm();
+const { handleSubmit, defineField } = useForm();
 const onSubmit = handleSubmit(values => {
   alert(JSON.stringify(values, null, 2));
 });
 
-const twitter = defineInputBinds('links.twitter');
-const github = defineInputBinds('links.github');
+const [twitter] = defineField('links.twitter');
+const [github] = defineField('links.github');
 </script>
diff --git a/docs/src/components/examples/CompositionNested02.vue b/docs/src/components/examples/CompositionNested02.vue
index b2f26f2e7..e50b9781a 100644
--- a/docs/src/components/examples/CompositionNested02.vue
+++ b/docs/src/components/examples/CompositionNested02.vue
@@ -1,7 +1,7 @@
 <template>
   <form @submit="onSubmit">
-    <input v-bind="twitter" type="url" placeholder="twitter" />
-    <input v-bind="github" type="url" placeholder="github" />
+    <input v-model="twitter" type="url" placeholder="twitter" />
+    <input v-model="github" type="url" placeholder="github" />
 
     <button>Submit</button>
   </form>
@@ -10,11 +10,11 @@
 <script setup>
 import { useForm } from 'vee-validate';
 
-const { handleSubmit, defineInputBinds } = useForm();
+const { handleSubmit, defineField } = useForm();
 const onSubmit = handleSubmit(values => {
   alert(JSON.stringify(values, null, 2));
 });
 
-const twitter = defineInputBinds('links[0]');
-const github = defineInputBinds('links[1]');
+const [twitter] = defineField('links[0]');
+const [github] = defineField('links[1]');
 </script>
diff --git a/docs/src/components/examples/CompositionNested03.vue b/docs/src/components/examples/CompositionNested03.vue
index b27362b20..c17cc727f 100644
--- a/docs/src/components/examples/CompositionNested03.vue
+++ b/docs/src/components/examples/CompositionNested03.vue
@@ -1,7 +1,7 @@
 <template>
   <form @submit="onSubmit">
-    <input v-bind="twitter" type="url" placeholder="twitter" />
-    <input v-bind="github" type="url" placeholder="github" />
+    <input v-model="twitter" type="url" placeholder="twitter" />
+    <input v-model="github" type="url" placeholder="github" />
 
     <button>Submit</button>
   </form>
@@ -10,11 +10,11 @@
 <script setup>
 import { useField, useForm } from 'vee-validate';
 
-const { handleSubmit, defineInputBinds } = useForm();
+const { handleSubmit, defineField } = useForm();
 const onSubmit = handleSubmit(values => {
   alert(JSON.stringify(values, null, 2));
 });
 
-const twitter = defineInputBinds('[links.twitter]');
-const github = defineInputBinds('[links.github]');
+const [twitter] = defineField('[links.twitter]');
+const [github] = defineField('[links.github]');
 </script>
diff --git a/docs/src/components/examples/CompositionNested05.vue b/docs/src/components/examples/CompositionNested05.vue
index 27bd06552..edc75b6ec 100644
--- a/docs/src/components/examples/CompositionNested05.vue
+++ b/docs/src/components/examples/CompositionNested05.vue
@@ -1,8 +1,8 @@
 <template>
   <form @submit="onSubmit">
-    <input v-bind="name" />
+    <input v-model="name" v-bind="nameAttrs" />
     <span>{{ errors['user.name'] }}</span>
-    <input v-bind="address" />
+    <input v-model="address" v-bind="addressAttrs" />
     <span>{{ errors['user.addresses[0]'] }}</span>
 
     <button>Submit</button>
@@ -13,7 +13,7 @@
 import { useField, useForm } from 'vee-validate';
 import * as yup from 'yup';
 
-const { handleSubmit, errors, defineInputBinds } = useForm({
+const { handleSubmit, errors, defineField } = useForm({
   validationSchema: yup.object({
     user: yup.object({
       name: yup.string().required(),
@@ -22,8 +22,8 @@ const { handleSubmit, errors, defineInputBinds } = useForm({
   }),
 });
 
-const name = defineInputBinds('user.name');
-const address = defineInputBinds('user.addresses[0]');
+const [name, nameAttrs] = defineField('user.name');
+const [address, addressAttrs] = defineField('user.addresses[0]');
 
 const onSubmit = handleSubmit(values => {
   alert(JSON.stringify(values, null, 2));
diff --git a/docs/src/components/examples/CompositionValibotBasic.vue b/docs/src/components/examples/CompositionValibotBasic.vue
index 6f7dad257..f20306a4b 100644
--- a/docs/src/components/examples/CompositionValibotBasic.vue
+++ b/docs/src/components/examples/CompositionValibotBasic.vue
@@ -3,7 +3,7 @@ import { useForm } from 'vee-validate';
 import { toTypedSchema } from '@vee-validate/valibot';
 import { email, string, minLength, object } from 'valibot';
 
-const { errors, defineInputBinds } = useForm({
+const { errors, defineField } = useForm({
   validationSchema: toTypedSchema(
     object({
       email: string([minLength(1, 'Email is required'), email()]),
@@ -12,14 +12,14 @@ const { errors, defineInputBinds } = useForm({
   ),
 });
 
-const emailField = defineInputBinds('email');
-const passwordField = defineInputBinds('password');
+const [email, emailAttrs] = defineField('email');
+const [password, passwordAttrs] = defineField('password');
 </script>
 
 <template>
-  <input v-bind="emailField" />
+  <input v-model="email" v-bind="emailAttrs" />
   <div>{{ errors.email }}</div>
 
-  <input v-bind="passwordField" />
+  <input v-model="password" v-bind="passwordAttrs" />
   <div>{{ errors.password }}</div>
 </template>
diff --git a/docs/src/components/examples/CompositionValidateFnBasic.vue b/docs/src/components/examples/CompositionValidateFnBasic.vue
index 8717dddd8..9b3e4a940 100644
--- a/docs/src/components/examples/CompositionValidateFnBasic.vue
+++ b/docs/src/components/examples/CompositionValidateFnBasic.vue
@@ -5,16 +5,16 @@ function isEmail(value) {
   return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
 }
 
-const { errors, defineInputBinds } = useForm({
+const { errors, defineField } = useForm({
   validationSchema: {
     email: val => (isEmail(val) ? true : 'Invalid email'),
   },
 });
 
-const email = defineInputBinds('email');
+const [email, emailProps] = defineField('email');
 </script>
 
 <template>
-  <input v-bind="email" />
+  <input v-model="email" v-bind="emailProps" />
   <span>{{ errors.email }}</span>
 </template>
diff --git a/docs/src/components/examples/CompositionYupBasic.vue b/docs/src/components/examples/CompositionYupBasic.vue
index 6154a693c..6110143d5 100644
--- a/docs/src/components/examples/CompositionYupBasic.vue
+++ b/docs/src/components/examples/CompositionYupBasic.vue
@@ -3,23 +3,23 @@ import { useForm } from 'vee-validate';
 import { toTypedSchema } from '@vee-validate/yup';
 import * as yup from 'yup';
 
-const { errors, defineInputBinds } = useForm({
+const { errors, defineField } = useForm({
   validationSchema: toTypedSchema(
     yup.object({
       email: yup.string().email().required(),
       password: yup.string().min(6).required(),
-    })
+    }),
   ),
 });
 
-const email = defineInputBinds('email');
-const password = defineInputBinds('password');
+const [email, emailAttrs] = defineField('email');
+const [password, passwordAttrs] = defineField('password');
 </script>
 
 <template>
-  <input v-bind="email" />
+  <input v-model="email" v-bind="emailAttrs" />
   <div>{{ errors.email }}</div>
 
-  <input v-bind="password" />
+  <input v-model="password" v-bind="passwordAttrs" />
   <div>{{ errors.password }}</div>
 </template>
diff --git a/docs/src/components/examples/CompositionZodBasic.vue b/docs/src/components/examples/CompositionZodBasic.vue
index bff4f3c29..6158148ed 100644
--- a/docs/src/components/examples/CompositionZodBasic.vue
+++ b/docs/src/components/examples/CompositionZodBasic.vue
@@ -3,23 +3,23 @@ import { useForm } from 'vee-validate';
 import { toTypedSchema } from '@vee-validate/zod';
 import { z } from 'zod';
 
-const { errors, defineInputBinds } = useForm({
+const { errors, defineField } = useForm({
   validationSchema: toTypedSchema(
     z.object({
       email: z.string().min(1).email(),
       password: z.string().min(6),
-    })
+    }),
   ),
 });
 
-const email = defineInputBinds('email');
-const password = defineInputBinds('password');
+const [email, emailAttrs] = defineField('email');
+const [password, passwordAttrs] = defineField('password');
 </script>
 
 <template>
-  <input v-bind="email" />
+  <input v-model="email" v-bind="emailAttrs" />
   <div>{{ errors.email }}</div>
 
-  <input v-bind="password" />
+  <input v-model="password" v-bind="passwordAttrs" />
   <div>{{ errors.password }}</div>
 </template>
diff --git a/docs/src/pages/guide/composition-api/custom-inputs.mdx b/docs/src/pages/guide/composition-api/custom-inputs.mdx
index efbf9eec0..e68a9b57c 100644
--- a/docs/src/pages/guide/composition-api/custom-inputs.mdx
+++ b/docs/src/pages/guide/composition-api/custom-inputs.mdx
@@ -18,18 +18,18 @@ import Repl from '@/components/MdxRepl.vue';
 
 ## Imperative vs Declarative
 
-So far we've been using `useForm` to create forms and use `defineInputBinds` or `defineComponentBinds` to create field-binding objects to integrate them with our fields. However, that usually requires a lot of boilerplate code to create the binding object and the field component.
+So far we've been using `useForm` to create forms and use `defineField` to create field-binding objects to integrate them with our fields. However, that usually requires a lot of boilerplate code to create the binding object and the field component.
 
-For example, this is how a 5-field form looks like with `useForm` and `defineInputBinds`:
+For example, this is how a 5-field form looks like with `useForm` and `defineField`:
 
 ```js
-const { defineInputBinds } = useForm();
+const { defineField } = useForm();
 
-const email = defineInputBinds('email');
-const firstName = defineInputBinds('firstName');
-const lastName = defineInputBinds('lastName');
-const password = defineInputBinds('password');
-const passwordConfirm = defineInputBinds('passwordConfirm');
+const email = defineField('email');
+const firstName = defineField('firstName');
+const lastName = defineField('lastName');
+const password = defineField('password');
+const passwordConfirm = defineField('passwordConfirm');
 ```
 
 This can get ugly very quickly especially if you have a lot of field arrays or nested fields involved. This is one of the downsides of using an imperative API, but with `useField` you can switch to declarative API and get rid of all that boilerplate code.
@@ -59,13 +59,13 @@ const { value, errorMessage } = useField(() => props.name);
 </script>
 ```
 
-This works exactly the same way as with `defineInputBinds`, but now since you have a vee-validate field component, you can use it directly in any component with a form context and it will just work:
+This works exactly the same way as with `defineField`, but now since you have a vee-validate field component, you can use it directly in any component with a form context and it will just work:
 
 Here is a live example:
 
 <Repl files={{ 'App.vue': 'CompositionCustomField01', 'InputText.vue': 'CustomInputFieldBasic' }} client:only />
 
-Notice how much of the burden of defining fields went away as soon as switched to the declarative approach. This is where `useField` really shines, but that's just us getting started. Following along in this guide to make the most out of `useField`.
+Notice how much of the burden of defining fields went away as soon as switched to the declarative approach. This is where `useField` really shines, but that's just us getting started. Follow along in this guide to make the most out of `useField`.
 
 ## Validation
 
diff --git a/docs/src/pages/guide/composition-api/getting-started.mdx b/docs/src/pages/guide/composition-api/getting-started.mdx
index 9591ec8df..9388e9623 100644
--- a/docs/src/pages/guide/composition-api/getting-started.mdx
+++ b/docs/src/pages/guide/composition-api/getting-started.mdx
@@ -69,21 +69,23 @@ Creating a form context does a few things:
 
 With `useForm` declared, you are now ready to integrate the form with your elements and components. vee-validate is agnostic to the UI you are using.
 
-In the following couple of sections, you will learn how to associate your components and elements with the form and how to get value collection, validation, and error messages working.
+You will learn how to associate your components and elements with the form and how to get value collection, validation, and error messages working.
 
-#### HTML Inputs
+### HTML Inputs
 
-`useForm` provides a function called `defineInputBinds`. This function accepts a field path and returns an object containing the bindings for the input element. The field path is a string that represents the path to the field in the form context.
+`useForm` provides a function called `defineField`. This function accepts a field path and returns a value model and an object containing the bindings for the input element. The field path is a string that represents the path to the field in the form context.
 
 For example, if you have a field called `email` in the form context, the field path will be `email`.
 
 ```ts
-const { defineInputBinds } = useForm();
+const { defineField } = useForm();
 
-const email = defineInputBinds('email');
+const [email, emailAttrs] = defineField('email');
 ```
 
-Here is a basic example of how to use `defineInputBinds` with a simple input element:
+Note that `defineField` generates a pair of values, the first one is the value model and the second one is the attributes/props object. The props object contain attributes or event listeners that are useful to have on the input control or component which enables custom validation triggers and more.
+
+Here is a basic example of how to use `defineField` with a simple input element:
 
 <Repl files={{ 'App.vue': 'CompositionInputBindsBasic01' }} client:only />
 
@@ -100,40 +102,34 @@ const schema = yup.object({
   email: yup.string().required().email(),
 });
 
-const { defineInputBinds } = useForm({
+const { defineField } = useForm({
   validationSchema: schema,
 });
 
-const email = defineInputBinds('email');
+const [email, emailAttrs] = defineField('email');
 ```
 
 Here is a full running example:
 
 <Repl files={{ 'App.vue': 'CompositionInputBindsBasic02' }} client:only />
 
-Notice as you blur the input, the validation is then triggered and the errors are populated. By default `defineInputBinds` optimizes for lazy validation, meaning the validation will be triggered on `change` and on `blur` events.
+Notice as you type into the input, the validation is then triggered and the errors are populated. By default `defineField` optimizes for aggressive validation, meaning the validation will be triggered whenever the model changes.
 
-You can change that behavior. For example, you can make it "aggressive" by passing a configuration to `defineInputBinds` to validate `input` events.
+You can change that behavior. For example, you can make it "lazy" by passing a configuration to `defineField` to disable validation on model updates with `validateOnModelUpdate` config.
 
 <Repl files={{ 'App.vue': 'CompositionInputBindsBasic03' }} client:only />
 
 Now as you type in the field, the input is immediately validated. You can do more with dynamic configurations.
 
-### Component Binds
-
-Similarly to HTML inputs, you can achieve the same results for components with the `defineComponentBinds` function. This function accepts a field path and returns an object containing the bindings for the component.
+### Components
 
-```ts
-const { defineComponentBinds } = useForm();
-
-const email = defineComponentBinds('email');
-```
+Similarly to HTML inputs, you can achieve the same results with the same `defineField` function.
 
 Following the previous examples we can achieve value tracking like this:
 
 <Repl files={{ 'App.vue': 'CompositionComponentBindsBasic01', 'CustomInput.vue': 'CustomInputBasic' }} client:only />
 
-As you type into the input, notice that the `values` are being updated. This means you don't need to use `v-model` on your inputs or components.
+As you type into the input, notice that the `values` are being updated.
 
 Let's add validation to the previous example:
 
@@ -143,27 +139,21 @@ Notice that for components, validations are executed immediately. This is intend
 
 <Repl files={{ 'App.vue': 'CompositionComponentBindsBasic03', 'CustomInput.vue': 'CustomInputBasic' }} client:only />
 
-In case the component you are working with does not use the `modelValue` prop and the `update:modelValue` event, you can pass the `model` option to tell vee-validate which prop and event to use for that component binds. In the following example, the `CustomInput` uses the `value` prop and the `update:value` event.
-
-<Repl
-  files={{ 'App.vue': 'CompositionComponentBindsBasic06', 'CustomInput.vue': 'CustomInputBasicValueEvent' }}
-  client:only
-/>
-
 ### Mapping attributes and props
 
-With both `defineInputBinds` and `defineComponentBinds` you can map the attributes and props of the in. This is useful when you want to:
+But aside from the attributes and listeners that vee-validate adds to those binding objects, you can also map the attributes and props of the in. This is useful when you want to:
 
-- Use a component or an element that doesn't support `v-model`.
 - When you want to map the attributes/props to a different name.
-- Pass new attributes/props to the component/element.
+- Pass new attributes/props to the component/element based on the field state.
 
-You can use `mapProps` or `mapAttrs` (For elements) to include any additional props or attributes you need to add to the component/element.
+You can use `props` to include any additional props or attributes you need to add to the component/element.
 
 ```ts
-const { defineInputBinds } = useForm({
+const { defineField } = useForm({
   // ...
 });
+
+const [email, emailProps] = defineField('email', { props: state => ({ error: state.errors[0] }) });
 ```
 
 In the following example, we have a component that accepts an `error` string prop and shows that message if it is not empty. This is common in many UI libraries as they try not to lock you into a specific validation library.
@@ -183,16 +173,13 @@ Notice that `form` also gives you access to `errors` so you can reference them a
 
 ### Dynamic configuration
 
-Instead of passing a static configuration object to either `defineInputBinds` or `defineComponentBinds`, you could pass a function that returns different configuration values. This is useful when you want the configuration to be dynamic based on the field state.
+Instead of passing a static configuration object `defineField`, you could pass a function that returns different configuration values. This is useful when you want the configuration to be dynamic based on the field state.
 
 Here is an example that shows how to make the validation behavior "eager". Meaning if the field does not have any errors then it will only validate on `change`.
 
 But once it is invalid, it validates on each input event, making it "eager" for success.
 
-<Repl
-  files={{ 'App.vue': 'CompositionComponentBindsBasic05', 'CustomInput.vue': 'CustomInputBasicError' }}
-  client:only
-/>
+<Repl files={{ 'App.vue': 'CompositionComponentBindsBasic05' }} client:only />
 
 ## Form Schema
 
diff --git a/packages/i18n/package.json b/packages/i18n/package.json
index 39aac4c7d..887a00670 100644
--- a/packages/i18n/package.json
+++ b/packages/i18n/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vee-validate/i18n",
-  "version": "4.11.8",
+  "version": "4.12.0-alpha.1",
   "description": "Localization module for VeeValidate",
   "author": "Abdelrahman Awad <logaretm1@gmail.com>",
   "homepage": "https://vee-validate.logaretm.com/v4/guide/i18n",
diff --git a/packages/joi/package.json b/packages/joi/package.json
index 13f03fb75..c798e03ec 100644
--- a/packages/joi/package.json
+++ b/packages/joi/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vee-validate/joi",
-  "version": "4.11.8",
+  "version": "4.12.0-alpha.1",
   "description": "vee-validate integration with joi schema validation",
   "author": "Abdelrahman Awad <logaretm1@gmail.com>",
   "license": "MIT",
diff --git a/packages/joi/tests/joi.spec.ts b/packages/joi/tests/joi.spec.ts
index 11c664fa8..9dfe1c9ad 100644
--- a/packages/joi/tests/joi.spec.ts
+++ b/packages/joi/tests/joi.spec.ts
@@ -99,12 +99,13 @@ test('shows multiple errors using error bag', async () => {
 
       const schema = toTypedSchema(joiSchema);
 
-      const { useFieldModel, errorBag } = useForm({
+      const { defineField, errorBag } = useForm({
         validationSchema: schema,
         validateOnMount: true,
       });
 
-      const [email, password] = useFieldModel(['email', 'password']);
+      const [email] = defineField('email', { validateOnModelUpdate: true });
+      const [password] = defineField('password', { validateOnModelUpdate: true });
 
       return {
         schema,
@@ -115,10 +116,10 @@ test('shows multiple errors using error bag', async () => {
     },
     template: `
       <div>
-        <input id="email" name="email" v-model="email" />
+        <input id="email" name="email" v-model="email"  />
         <span id="emailErr">{{ errorBag.email?.join(',') }}</span>
 
-        <input id="password" name="password" type="password" v-model="password" />
+        <input id="password" name="password" type="password" v-model="password"  />
         <span id="passwordErr">{{ errorBag.password?.join(',') }}</span>
       </div>
     `,
@@ -160,12 +161,13 @@ test('validates typed schema form with joi', async () => {
         }),
       );
 
-      const { useFieldModel, errors } = useForm({
+      const { defineField, errors } = useForm({
         validationSchema: schema,
         validateOnMount: true,
       });
 
-      const [email, password] = useFieldModel(['email', 'password']);
+      const [email] = defineField('email', { validateOnModelUpdate: true });
+      const [password] = defineField('password', { validateOnModelUpdate: true });
 
       return {
         schema,
diff --git a/packages/nuxt/package.json b/packages/nuxt/package.json
index 878b5a728..e9ef7501e 100644
--- a/packages/nuxt/package.json
+++ b/packages/nuxt/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vee-validate/nuxt",
-  "version": "4.11.8",
+  "version": "4.12.0-alpha.1",
   "description": "Official vee-validate nuxt module",
   "author": "Abdelrahman Awad <logaretm1@gmail.com>",
   "license": "MIT",
diff --git a/packages/rules/package.json b/packages/rules/package.json
index ba7c026b9..950755e8e 100644
--- a/packages/rules/package.json
+++ b/packages/rules/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vee-validate/rules",
-  "version": "4.11.8",
+  "version": "4.12.0-alpha.1",
   "description": "Form Validation for Vue.js",
   "author": "Abdelrahman Awad <logaretm1@gmail.com>",
   "license": "MIT",
diff --git a/packages/rules/tests/toTypedSchema.spec.ts b/packages/rules/tests/toTypedSchema.spec.ts
index 0b7bcb968..df929804c 100644
--- a/packages/rules/tests/toTypedSchema.spec.ts
+++ b/packages/rules/tests/toTypedSchema.spec.ts
@@ -21,12 +21,13 @@ test('validates typed schema form with global rules', async () => {
         password: 'required|min:8',
       });
 
-      const { useFieldModel, errors } = useForm({
+      const { defineField, errors } = useForm({
         validationSchema: schema,
         validateOnMount: true,
       });
 
-      const [email, password] = useFieldModel(['email', 'password']);
+      const [email] = defineField('email', { validateOnModelUpdate: true });
+      const [password] = defineField('password', { validateOnModelUpdate: true });
 
       return {
         schema,
diff --git a/packages/valibot/package.json b/packages/valibot/package.json
index 9176f750d..c74340b2c 100644
--- a/packages/valibot/package.json
+++ b/packages/valibot/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vee-validate/valibot",
-  "version": "4.11.8",
+  "version": "4.12.0-alpha.1",
   "description": "vee-validate integration with valibot schema validation",
   "author": "Abdelrahman Awad <logaretm1@gmail.com>",
   "license": "MIT",
diff --git a/packages/valibot/tests/valibot.spec.ts b/packages/valibot/tests/valibot.spec.ts
index dc71d4cde..cc9a1e8d5 100644
--- a/packages/valibot/tests/valibot.spec.ts
+++ b/packages/valibot/tests/valibot.spec.ts
@@ -81,12 +81,13 @@ describe('valibot', () => {
           }),
         );
 
-        const { useFieldModel, errorBag } = useForm({
+        const { defineField, errorBag } = useForm({
           validationSchema: schema,
           validateOnMount: true,
         });
 
-        const [email, password] = useFieldModel(['email', 'password']);
+        const [email] = defineField('email', { validateOnModelUpdate: true });
+        const [password] = defineField('password', { validateOnModelUpdate: true });
 
         return {
           schema,
@@ -138,12 +139,13 @@ describe('valibot', () => {
           }),
         );
 
-        const { useFieldModel, errors } = useForm({
+        const { defineField, errors } = useForm({
           validationSchema: schema,
           validateOnMount: true,
         });
 
-        const [email, password] = useFieldModel(['email', 'password']);
+        const [email] = defineField('email', { validateOnModelUpdate: true });
+        const [password] = defineField('password', { validateOnModelUpdate: true });
 
         return {
           schema,
diff --git a/packages/vee-validate/package.json b/packages/vee-validate/package.json
index 3901207b5..4694981a4 100644
--- a/packages/vee-validate/package.json
+++ b/packages/vee-validate/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vee-validate",
-  "version": "4.11.8",
+  "version": "4.12.0-alpha.1",
   "description": "Form Validation for Vue.js",
   "author": "Abdelrahman Awad <logaretm1@gmail.com>",
   "license": "MIT",
diff --git a/packages/vee-validate/src/types/common.ts b/packages/vee-validate/src/types/common.ts
index 28e65ee8e..6a2db858e 100644
--- a/packages/vee-validate/src/types/common.ts
+++ b/packages/vee-validate/src/types/common.ts
@@ -8,6 +8,8 @@ export type MaybeArray<T> = T | T[];
 
 export type MaybePromise<T> = T | Promise<T>;
 
+export type FlattenAndSetPathsType<TRecord, TType> = { [K in Path<TRecord>]: TType };
+
 export type MapValuesPathsToRefs<
   TValues extends GenericObject,
   TPaths extends readonly [...MaybeRef<Path<TValues>>[]],
@@ -18,5 +20,3 @@ export type MapValuesPathsToRefs<
       : Ref<unknown>
     : Ref<unknown>;
 };
-
-export type FlattenAndSetPathsType<TRecord, TType> = { [K in Path<TRecord>]: TType };
diff --git a/packages/vee-validate/src/types/forms.ts b/packages/vee-validate/src/types/forms.ts
index 060b759d8..d77868ec5 100644
--- a/packages/vee-validate/src/types/forms.ts
+++ b/packages/vee-validate/src/types/forms.ts
@@ -1,5 +1,5 @@
 import { ComputedRef, Ref, MaybeRef, MaybeRefOrGetter } from 'vue';
-import { MapValuesPathsToRefs, GenericObject, MaybeArray, MaybePromise, FlattenAndSetPathsType } from './common';
+import { GenericObject, MaybeArray, MaybePromise, FlattenAndSetPathsType, MapValuesPathsToRefs } from './common';
 import { FieldValidationMetaInfo } from '../../../shared';
 import { Path, PathValue } from './paths';
 import { PartialDeep } from 'type-fest';
@@ -233,66 +233,36 @@ type HandleSubmitFactory<TValues extends GenericObject, TOutput = TValues> = <TR
   onSubmitValidationErrorCb?: InvalidSubmissionHandler<TValues>,
 ) => (e?: Event) => Promise<TReturn | undefined>;
 
-export interface PrivateFormContext<TValues extends GenericObject = GenericObject, TOutput = TValues>
-  extends FormActions<TValues> {
-  formId: number;
-  values: TValues;
-  initialValues: Ref<Partial<TValues>>;
-  controlledValues: Ref<TValues>;
-  fieldArrays: PrivateFieldArrayContext[];
-  submitCount: Ref<number>;
-  schema?: MaybeRef<RawFormSchema<TValues> | TypedSchema<TValues, TOutput> | YupSchema<TValues> | undefined>;
-  errorBag: Ref<FormErrorBag<TValues>>;
-  errors: ComputedRef<FormErrors<TValues>>;
-  meta: ComputedRef<FormMeta<TValues>>;
-  isSubmitting: Ref<boolean>;
-  isValidating: Ref<boolean>;
-  keepValuesOnUnmount: MaybeRef<boolean>;
-  validateSchema?: (mode: SchemaValidationMode) => Promise<FormValidationResult<TValues, TOutput>>;
-  validate(opts?: Partial<ValidationOptions>): Promise<FormValidationResult<TValues, TOutput>>;
-  validateField(field: Path<TValues>, opts?: Partial<ValidationOptions>): Promise<ValidationResult>;
-  stageInitialValue(path: string, value: unknown, updateOriginal?: boolean): void;
-  unsetInitialValue(path: string): void;
-  handleSubmit: HandleSubmitFactory<TValues, TOutput> & { withControlled: HandleSubmitFactory<TValues, TOutput> };
-  setFieldInitialValue(path: string, value: unknown): void;
-  useFieldModel<TPath extends Path<TValues>>(path: TPath): Ref<PathValue<TValues, TPath>>;
-  useFieldModel<TPaths extends readonly [...MaybeRef<Path<TValues>>[]]>(
-    paths: TPaths,
-  ): MapValuesPathsToRefs<TValues, TPaths>;
-  createPathState<TPath extends Path<TValues>>(
-    path: MaybeRef<TPath>,
-    config?: Partial<PathStateConfig>,
-  ): PathState<PathValue<TValues, TPath>>;
-  getPathState<TPath extends Path<TValues>>(path: TPath): PathState<PathValue<TValues, TPath>> | undefined;
-  getAllPathStates(): PathState[];
-  removePathState<TPath extends Path<TValues>>(path: TPath, id: number): void;
-  unsetPathValue<TPath extends Path<TValues>>(path: TPath): void;
-  destroyPath(path: string): void;
-  isFieldTouched<TPath extends Path<TValues>>(path: TPath): boolean;
-  isFieldDirty<TPath extends Path<TValues>>(path: TPath): boolean;
-  isFieldValid<TPath extends Path<TValues>>(path: TPath): boolean;
-}
-
-export interface ComponentModellessBinds {
-  onBlur: () => void;
-}
-
-export type ComponentModelBinds<TValue = any, TModel extends string = 'modelValue'> = ComponentModellessBinds & {
-  [TKey in `onUpdate:${TModel}`]: (value: TValue) => void;
-};
-
-export type BaseComponentBinds<TValue = any, TModel extends string = 'modelValue'> = ComponentModelBinds<
-  TValue,
-  TModel
-> & {
-  [k in TModel]: TValue;
-};
-
 export type PublicPathState<TValue = unknown> = Omit<
   PathState<TValue>,
   'bails' | 'label' | 'multiple' | 'fieldsCount' | 'validate' | 'id' | 'type' | '__flags'
 >;
 
+export interface BaseFieldProps {
+  onBlur: (e: Event) => void;
+  onChange: (e: Event) => void;
+  onInput: (e: Event) => void;
+}
+
+export interface InputBindsConfig<TValue = unknown, TExtraProps extends GenericObject = GenericObject> {
+  props: (state: PublicPathState<TValue>) => TExtraProps;
+  validateOnBlur: boolean;
+  label: MaybeRefOrGetter<string>;
+  validateOnChange: boolean;
+  validateOnInput: boolean;
+  validateOnModelUpdate: boolean;
+}
+
+export type LazyInputBindsConfig<TValue = unknown, TExtraProps extends GenericObject = GenericObject> = (
+  state: PublicPathState<TValue>,
+) => Partial<{
+  props: TExtraProps;
+  validateOnBlur: boolean;
+  validateOnChange: boolean;
+  validateOnInput: boolean;
+  validateOnModelUpdate: boolean;
+}>;
+
 export interface ComponentBindsConfig<
   TValue = unknown,
   TExtraProps extends GenericObject = GenericObject,
@@ -315,6 +285,21 @@ export type LazyComponentBindsConfig<
   model: TModel;
 }>;
 
+export interface ComponentModellessBinds {
+  onBlur: () => void;
+}
+
+export type ComponentModelBinds<TValue = any, TModel extends string = 'modelValue'> = ComponentModellessBinds & {
+  [TKey in `onUpdate:${TModel}`]: (value: TValue) => void;
+};
+
+export type BaseComponentBinds<TValue = any, TModel extends string = 'modelValue'> = ComponentModelBinds<
+  TValue,
+  TModel
+> & {
+  [k in TModel]: TValue;
+};
+
 export interface BaseInputBinds<TValue = unknown> {
   value: TValue | undefined;
   onBlur: (e: Event) => void;
@@ -322,22 +307,83 @@ export interface BaseInputBinds<TValue = unknown> {
   onInput: (e: Event) => void;
 }
 
-export interface InputBindsConfig<TValue = unknown, TExtraProps extends GenericObject = GenericObject> {
-  mapAttrs: (state: PublicPathState<TValue>) => TExtraProps;
-  validateOnBlur: boolean;
-  validateOnChange: boolean;
-  validateOnInput: boolean;
+export interface PrivateFormContext<TValues extends GenericObject = GenericObject, TOutput = TValues>
+  extends FormActions<TValues> {
+  formId: number;
+  values: TValues;
+  initialValues: Ref<Partial<TValues>>;
+  controlledValues: Ref<TValues>;
+  fieldArrays: PrivateFieldArrayContext[];
+  submitCount: Ref<number>;
+  schema?: MaybeRef<RawFormSchema<TValues> | TypedSchema<TValues, TOutput> | YupSchema<TValues> | undefined>;
+  errorBag: Ref<FormErrorBag<TValues>>;
+  errors: ComputedRef<FormErrors<TValues>>;
+  meta: ComputedRef<FormMeta<TValues>>;
+  isSubmitting: Ref<boolean>;
+  isValidating: Ref<boolean>;
+  keepValuesOnUnmount: MaybeRef<boolean>;
+  validateSchema?: (mode: SchemaValidationMode) => Promise<FormValidationResult<TValues, TOutput>>;
+  validate(opts?: Partial<ValidationOptions>): Promise<FormValidationResult<TValues, TOutput>>;
+  validateField(field: Path<TValues>, opts?: Partial<ValidationOptions>): Promise<ValidationResult>;
+  stageInitialValue(path: string, value: unknown, updateOriginal?: boolean): void;
+  unsetInitialValue(path: string): void;
+  handleSubmit: HandleSubmitFactory<TValues, TOutput> & { withControlled: HandleSubmitFactory<TValues, TOutput> };
+  setFieldInitialValue(path: string, value: unknown): void;
+  createPathState<TPath extends Path<TValues>>(
+    path: MaybeRef<TPath>,
+    config?: Partial<PathStateConfig>,
+  ): PathState<PathValue<TValues, TPath>>;
+  getPathState<TPath extends Path<TValues>>(path: TPath): PathState<PathValue<TValues, TPath>> | undefined;
+  getAllPathStates(): PathState[];
+  removePathState<TPath extends Path<TValues>>(path: TPath, id: number): void;
+  unsetPathValue<TPath extends Path<TValues>>(path: TPath): void;
+  destroyPath(path: string): void;
+  isFieldTouched<TPath extends Path<TValues>>(path: TPath): boolean;
+  isFieldDirty<TPath extends Path<TValues>>(path: TPath): boolean;
+  isFieldValid<TPath extends Path<TValues>>(path: TPath): boolean;
+  defineField<
+    TPath extends Path<TValues>,
+    TValue = PathValue<TValues, TPath>,
+    TExtras extends GenericObject = GenericObject,
+  >(
+    path: MaybeRefOrGetter<TPath>,
+    config?: Partial<InputBindsConfig<TValue, TExtras>> | LazyInputBindsConfig<TValue, TExtras>,
+  ): [Ref<TValue>, Ref<BaseFieldProps & TExtras>];
+  /**
+   * @deprecated use defineField instead
+   */
+  useFieldModel<TPath extends Path<TValues>>(path: TPath): Ref<PathValue<TValues, TPath>>;
+  /**
+   * @deprecated use defineField instead
+   */
+  useFieldModel<TPaths extends readonly [...MaybeRef<Path<TValues>>[]]>(
+    paths: TPaths,
+  ): MapValuesPathsToRefs<TValues, TPaths>;
+  /**
+   * @deprecated use defineField instead
+   */
+  defineComponentBinds<
+    TPath extends Path<TValues>,
+    TValue = PathValue<TValues, TPath>,
+    TModel extends string = 'modelValue',
+    TExtras extends GenericObject = GenericObject,
+  >(
+    path: MaybeRefOrGetter<TPath>,
+    config?: Partial<ComponentBindsConfig<TValue, TExtras, TModel>> | LazyComponentBindsConfig<TValue, TExtras, TModel>,
+  ): Ref<BaseComponentBinds<TValue, TModel> & TExtras>;
+  /**
+   * @deprecated use defineField instead
+   */
+  defineInputBinds<
+    TPath extends Path<TValues>,
+    TValue = PathValue<TValues, TPath>,
+    TExtras extends GenericObject = GenericObject,
+  >(
+    path: MaybeRefOrGetter<TPath>,
+    config?: Partial<InputBindsConfig<TValue, TExtras>> | LazyInputBindsConfig<TValue, TExtras>,
+  ): Ref<BaseInputBinds<TValue> & TExtras>;
 }
 
-export type LazyInputBindsConfig<TValue = unknown, TExtraProps extends GenericObject = GenericObject> = (
-  state: PublicPathState<TValue>,
-) => Partial<{
-  attrs: TExtraProps;
-  validateOnBlur: boolean;
-  validateOnChange: boolean;
-  validateOnInput: boolean;
-}>;
-
 export interface FormContext<TValues extends GenericObject = GenericObject, TOutput = TValues>
   extends Omit<
     PrivateFormContext<TValues, TOutput>,
@@ -360,21 +406,4 @@ export interface FormContext<TValues extends GenericObject = GenericObject, TOut
   values: TValues;
   handleReset: () => void;
   submitForm: (e?: unknown) => Promise<void>;
-  defineComponentBinds<
-    TPath extends Path<TValues>,
-    TValue = PathValue<TValues, TPath>,
-    TModel extends string = 'modelValue',
-    TExtras extends GenericObject = GenericObject,
-  >(
-    path: MaybeRefOrGetter<TPath>,
-    config?: Partial<ComponentBindsConfig<TValue, TExtras, TModel>> | LazyComponentBindsConfig<TValue, TExtras, TModel>,
-  ): Ref<BaseComponentBinds<TValue, TModel> & TExtras>;
-  defineInputBinds<
-    TPath extends Path<TValues>,
-    TValue = PathValue<TValues, TPath>,
-    TExtras extends GenericObject = GenericObject,
-  >(
-    path: MaybeRefOrGetter<TPath>,
-    config?: Partial<InputBindsConfig<TValue, TExtras>> | LazyInputBindsConfig<TValue, TExtras>,
-  ): Ref<BaseInputBinds<TValue> & TExtras>;
 }
diff --git a/packages/vee-validate/src/useForm.ts b/packages/vee-validate/src/useForm.ts
index 6fce8dcd9..a12a11058 100644
--- a/packages/vee-validate/src/useForm.ts
+++ b/packages/vee-validate/src/useForm.ts
@@ -35,7 +35,6 @@ import {
   ValidationOptions,
   PrivateFieldArrayContext,
   InvalidSubmissionHandler,
-  MapValuesPathsToRefs,
   FieldState,
   GenericObject,
   TypedSchema,
@@ -44,13 +43,13 @@ import {
   PathValue,
   PathState,
   PathStateConfig,
-  BaseComponentBinds,
-  BaseInputBinds,
+  BaseFieldProps,
   InputBindsConfig,
-  ComponentBindsConfig,
   LazyInputBindsConfig,
-  LazyComponentBindsConfig,
   ResetFormOpts,
+  MapValuesPathsToRefs,
+  ComponentBindsConfig,
+  LazyComponentBindsConfig,
 } from './types';
 import {
   getFromPath,
@@ -64,9 +63,9 @@ import {
   isEqual,
   isTypedSchema,
   normalizeErrorItem,
-  normalizeEventValue,
   omit,
   debounceNextTick,
+  normalizeEventValue,
 } from './utils';
 import { FormContextKey } from './symbols';
 import { validateTypedSchema, validateObjectSchema } from './validate';
@@ -619,10 +618,13 @@ export function useForm<
     resetForm,
     resetField,
     handleSubmit,
+    useFieldModel,
+    defineInputBinds,
+    defineComponentBinds: defineComponentBinds as any,
+    defineField,
     stageInitialValue,
     unsetInitialValue,
     setFieldInitialValue,
-    useFieldModel,
     createPathState,
     getPathState: findPathState,
     unsetPathValue,
@@ -685,37 +687,23 @@ export function useForm<
     }
   }
 
-  function createModel<TPath extends Path<TValues>>(path: MaybeRef<TPath>) {
-    const pathState = findPathState(unref(path)) || createPathState(path);
+  function createModel<TPath extends Path<TValues>>(
+    path: MaybeRefOrGetter<TPath>,
+    shouldValidate?: MaybeRefOrGetter<boolean>,
+  ) {
+    const pathState = findPathState(toValue(path)) || createPathState(path);
 
     return computed({
       get() {
         return pathState.value;
       },
       set(value) {
-        const pathValue = unref(path);
-        setFieldValue(pathValue, value, false);
-        pathState.validated = true;
-        pathState.pending = true;
-        validateField(pathValue).then(() => {
-          pathState.pending = false;
-        });
+        const pathValue = toValue(path);
+        setFieldValue(pathValue, value, toValue(shouldValidate) ?? false);
       },
     }) as Ref<PathValue<TValues, TPath>>;
   }
 
-  function useFieldModel<TPath extends Path<TValues>>(path: TPath): Ref<PathValue<TValues, TPath>>;
-  function useFieldModel<TPaths extends readonly [...MaybeRef<Path<TValues>>[]]>(
-    paths: TPaths,
-  ): MapValuesPathsToRefs<TValues, TPaths>;
-  function useFieldModel<TPaths extends Path<TValues> | readonly [...MaybeRef<Path<TValues>>[]]>(pathOrPaths: TPaths) {
-    if (!Array.isArray(pathOrPaths)) {
-      return createModel(pathOrPaths as any);
-    }
-
-    return pathOrPaths.map(createModel) as unknown as MapValuesPathsToRefs<TValues, any>;
-  }
-
   /**
    * Sets the touched meta state on a field
    */
@@ -979,16 +967,16 @@ export function useForm<
     );
   }
 
-  function defineComponentBinds<
+  function defineField<
     TPath extends Path<TValues>,
     TValue = PathValue<TValues, TPath>,
-    TModel extends string = 'modelValue',
     TExtras extends GenericObject = GenericObject,
   >(
     path: MaybeRefOrGetter<TPath>,
-    config?: Partial<ComponentBindsConfig<TValue, TExtras, TModel>> | LazyComponentBindsConfig<TValue, TExtras, TModel>,
+    config?: Partial<InputBindsConfig<TValue, TExtras>> | LazyInputBindsConfig<TValue, TExtras>,
   ) {
-    const pathState = findPathState(toValue(path)) || createPathState(path);
+    const label = isCallable(config) ? undefined : config?.label;
+    const pathState = (findPathState(toValue(path)) || createPathState(path, { label })) as PathState<TValue>;
     const evalConfig = () => (isCallable(config) ? config(omit(pathState, PRIVATE_PATH_STATE_KEYS)) : config || {});
 
     function onBlur() {
@@ -999,44 +987,71 @@ export function useForm<
       }
     }
 
-    function onUpdateModelValue(value: TValue) {
-      const validateOnModelUpdate = evalConfig().validateOnModelUpdate ?? getConfig().validateOnModelUpdate;
-      setFieldValue(pathState.path as Path<TValues>, value as PathValue<TValues, TPath>, validateOnModelUpdate);
+    function onInput() {
+      const validateOnInput = evalConfig().validateOnInput ?? getConfig().validateOnInput;
+      if (validateOnInput) {
+        nextTick(() => {
+          validateField(pathState.path as Path<TValues>);
+        });
+      }
     }
 
-    const props = computed(() => {
-      if (isCallable(config)) {
-        const configVal = config(pathState);
-        const model = configVal.model || 'modelValue';
-
-        return {
-          onBlur,
-          [model]: pathState.value,
-          [`onUpdate:${model}`]: onUpdateModelValue,
-          ...(configVal.props || {}),
-        } as BaseComponentBinds<TValue, TModel> & TExtras;
+    function onChange() {
+      const validateOnChange = evalConfig().validateOnChange ?? getConfig().validateOnChange;
+      if (validateOnChange) {
+        nextTick(() => {
+          validateField(pathState.path as Path<TValues>);
+        });
       }
+    }
 
-      const model = config?.model || 'modelValue';
-      const base = {
+    const props = computed(() => {
+      const base: BaseFieldProps = {
+        onChange,
+        onInput,
         onBlur,
-        [model]: pathState.value,
-        [`onUpdate:${model}`]: onUpdateModelValue,
       };
 
-      if (config?.mapProps) {
+      if (isCallable(config)) {
         return {
           ...base,
-          ...config.mapProps(omit(pathState, PRIVATE_PATH_STATE_KEYS)),
-        } as BaseComponentBinds<TValue, TModel> & TExtras;
+          ...(config(omit(pathState, PRIVATE_PATH_STATE_KEYS)).props || {}),
+        } as BaseFieldProps & TExtras;
       }
 
-      return base as BaseComponentBinds<TValue, TModel> & TExtras;
+      if (config?.props) {
+        return {
+          ...base,
+          ...config.props(omit(pathState, PRIVATE_PATH_STATE_KEYS)),
+        } as BaseFieldProps & TExtras;
+      }
+
+      return base as BaseFieldProps & TExtras;
     });
 
-    return props;
+    const model = createModel(path, () => evalConfig().validateOnModelUpdate ?? true);
+
+    return [model, props] as [Ref<TValue>, Ref<BaseFieldProps & TExtras>];
   }
 
+  /**
+   * @deprecated use defineField instead
+   */
+  function useFieldModel<TPath extends Path<TValues>>(path: TPath): Ref<PathValue<TValues, TPath>>;
+  function useFieldModel<TPaths extends readonly [...MaybeRef<Path<TValues>>[]]>(
+    paths: TPaths,
+  ): MapValuesPathsToRefs<TValues, TPaths>;
+  function useFieldModel<TPaths extends Path<TValues> | readonly [...MaybeRef<Path<TValues>>[]]>(pathOrPaths: TPaths) {
+    if (!Array.isArray(pathOrPaths)) {
+      return createModel(pathOrPaths as any);
+    }
+
+    return pathOrPaths.map(p => createModel(p, true)) as unknown as MapValuesPathsToRefs<TValues, any>;
+  }
+
+  /**
+   * @deprecated use defineField instead
+   */
   function defineInputBinds<
     TPath extends Path<TValues>,
     TValue = PathValue<TValues, TPath>,
@@ -1045,55 +1060,62 @@ export function useForm<
     path: MaybeRefOrGetter<TPath>,
     config?: Partial<InputBindsConfig<TValue, TExtras>> | LazyInputBindsConfig<TValue, TExtras>,
   ) {
-    const pathState = (findPathState(toValue(path)) || createPathState(path)) as PathState<TValue>;
-    const evalConfig = () => (isCallable(config) ? config(omit(pathState, PRIVATE_PATH_STATE_KEYS)) : config || {});
+    const [model, props] = defineField(path, config);
 
-    function onBlur() {
-      pathState.touched = true;
-      const validateOnBlur = evalConfig().validateOnBlur ?? getConfig().validateOnBlur;
-      if (validateOnBlur) {
-        validateField(pathState.path as Path<TValues>);
-      }
+    function onBlur(e: Event) {
+      props.value.onBlur(e);
     }
 
     function onInput(e: Event) {
       const value = normalizeEventValue(e) as PathValue<TValues, TPath>;
-      const validateOnInput = evalConfig().validateOnInput ?? getConfig().validateOnInput;
-      setFieldValue(pathState.path as Path<TValues>, value, validateOnInput);
+      setFieldValue(toValue(path), value, false);
+      props.value.onInput(e);
     }
 
     function onChange(e: Event) {
       const value = normalizeEventValue(e) as PathValue<TValues, TPath>;
-      const validateOnChange = evalConfig().validateOnChange ?? getConfig().validateOnChange;
-      setFieldValue(pathState.path as Path<TValues>, value, validateOnChange);
+      setFieldValue(toValue(path), value, false);
+      props.value.onChange(e);
     }
 
-    const props = computed(() => {
-      const base: BaseInputBinds<TValue> = {
-        value: pathState.value,
-        onChange,
-        onInput,
+    return computed(() => {
+      return {
+        ...props.value,
         onBlur,
+        onInput,
+        onChange,
+        value: model.value,
       };
+    });
+  }
 
-      if (isCallable(config)) {
-        return {
-          ...base,
-          ...(config(omit(pathState, PRIVATE_PATH_STATE_KEYS)).attrs || {}),
-        } as BaseInputBinds<TValue> & TExtras;
-      }
+  /**
+   * @deprecated use defineField instead
+   */
+  function defineComponentBinds<
+    TPath extends Path<TValues>,
+    TValue = PathValue<TValues, TPath>,
+    TModel extends string = 'modelValue',
+    TExtras extends GenericObject = GenericObject,
+  >(
+    path: MaybeRefOrGetter<TPath>,
+    config?: Partial<ComponentBindsConfig<TValue, TExtras, TModel>> | LazyComponentBindsConfig<TValue, TExtras, TModel>,
+  ) {
+    const [model, props] = defineField(path, config);
+    const pathState = findPathState(toValue(path)) as PathState<TValue>;
 
-      if (config?.mapAttrs) {
-        return {
-          ...base,
-          ...config.mapAttrs(omit(pathState, PRIVATE_PATH_STATE_KEYS)),
-        } as BaseInputBinds<TValue> & TExtras;
-      }
+    function onUpdateModelValue(value: TValue) {
+      model.value = value;
+    }
 
-      return base as BaseInputBinds<TValue> & TExtras;
+    return computed(() => {
+      const conf = isCallable(config) ? config(omit(pathState, PRIVATE_PATH_STATE_KEYS)) : config || {};
+      return {
+        [conf.model || 'modelValue']: model.value,
+        [`onUpdate:${conf.model || 'modelValue'}`]: onUpdateModelValue,
+        ...props.value,
+      };
     });
-
-    return props;
   }
 
   return {
@@ -1101,8 +1123,6 @@ export function useForm<
     values: readonly(formValues) as TValues,
     handleReset: () => resetForm(),
     submitForm,
-    defineComponentBinds,
-    defineInputBinds,
   };
 }
 
diff --git a/packages/vee-validate/tests/useFieldArray.spec.ts b/packages/vee-validate/tests/useFieldArray.spec.ts
index 32255f267..565fdbcf4 100644
--- a/packages/vee-validate/tests/useFieldArray.spec.ts
+++ b/packages/vee-validate/tests/useFieldArray.spec.ts
@@ -87,13 +87,11 @@ test('warns when updating a no-longer existing item', async () => {
       });
 
       const { remove, fields } = useFieldArray('users');
-      onMounted(() => {
+      onMounted(async () => {
         const item = fields.value[0];
         remove(0);
-
-        nextTick(() => {
-          item.value = 'test';
-        });
+        await nextTick();
+        item.value = 'test';
       });
     },
     template: `
diff --git a/packages/vee-validate/tests/useForm.spec.ts b/packages/vee-validate/tests/useForm.spec.ts
index b26dd3189..d20bbd43a 100644
--- a/packages/vee-validate/tests/useForm.spec.ts
+++ b/packages/vee-validate/tests/useForm.spec.ts
@@ -1,5 +1,5 @@
-import { FieldMeta, FormContext, FormMeta, useField, useForm } from '@/vee-validate';
-import { mountWithHoc, setValue, flushPromises, runInSetup, dispatchEvent } from './helpers';
+import { FieldMeta, FormContext, FormMeta, useField, useForm, defineRule, configure } from '@/vee-validate';
+import { mountWithHoc, setValue, flushPromises, dispatchEvent } from './helpers';
 import * as yup from 'yup';
 import { onMounted, ref, Ref } from 'vue';
 import { ModelComp, CustomModelComp } from './helpers/ModelComp';
@@ -165,7 +165,7 @@ describe('useForm()', () => {
     mountWithHoc({
       setup() {
         form = useForm({ validationSchema: yup.object().shape({ field: yup.string().required(REQUIRED_MESSAGE) }) });
-        form.defineInputBinds('field');
+        form.defineField('field');
 
         return {};
       },
@@ -185,7 +185,7 @@ describe('useForm()', () => {
     mountWithHoc({
       setup() {
         form = useForm({ validationSchema: yup.object().shape({ field: yup.string().required(REQUIRED_MESSAGE) }) });
-        form.defineInputBinds('field');
+        form.defineField('field');
 
         return {};
       },
@@ -521,46 +521,6 @@ describe('useForm()', () => {
     expect(meta[2]?.textContent).toBe('false');
   });
 
-  test('Creates a writeable model for a field path', async () => {
-    await runInSetup(() => {
-      const { values, useFieldModel } = useForm({
-        initialValues: {
-          greet: 'hey',
-          age: 1,
-        },
-      });
-      const greet = useFieldModel('greet');
-      const age = useFieldModel('age');
-
-      expect(values.greet).toBe('hey');
-      expect(values.age).toBe(1);
-      greet.value = 'hello';
-      age.value = 2;
-      expect(values.greet).toBe('hello');
-      expect(values.age).toBe(2);
-    });
-  });
-
-  test('Creates multiple writeable models for given field paths', async () => {
-    await runInSetup(() => {
-      const { values, useFieldModel } = useForm({
-        initialValues: {
-          greet: 'hey',
-          age: 1,
-        },
-      });
-
-      const [age, greet] = useFieldModel(['age', 'greet']);
-
-      expect(values.greet).toBe('hey');
-      expect(values.age).toBe(1);
-      greet.value = 'hello';
-      age.value = 2;
-      expect(values.greet).toBe('hello');
-      expect(values.age).toBe(2);
-    });
-  });
-
   // #3906
   test('only latest schema validation run messages are used', async () => {
     function validator(value: string | undefined) {
@@ -586,20 +546,22 @@ describe('useForm()', () => {
 
     mountWithHoc({
       setup() {
-        const { errors, useFieldModel } = useForm({
+        const { errors, defineField } = useForm({
           validationSchema: {
             test: validator,
           },
         });
-        const model = useFieldModel('test');
+
+        const [model, props] = defineField('test');
 
         return {
           model,
           errors,
+          props,
         };
       },
       template: `
-        <input name="field" v-model="model" />
+        <input name="field" v-model="model" v-bind="props" />
         <span>{{ errors.test }}</span>
       `,
     });
@@ -693,43 +655,6 @@ describe('useForm()', () => {
     );
   });
 
-  test('useFieldModel marks the field as controlled', async () => {
-    const spy = vi.fn();
-    const initial = {
-      field: '111',
-      field2: '222',
-      createdAt: Date.now(),
-    };
-    mountWithHoc({
-      setup() {
-        const { handleSubmit, useFieldModel } = useForm({
-          initialValues: initial,
-        });
-
-        const onSubmit = handleSubmit.withControlled(values => {
-          spy({ values });
-        });
-
-        useFieldModel(['field', 'field2']);
-
-        onMounted(onSubmit);
-
-        return {};
-      },
-      template: `
-        <div></div>
-      `,
-    });
-
-    await flushPromises();
-    expect(spy).toHaveBeenCalledTimes(1);
-    expect(spy).toHaveBeenLastCalledWith(
-      expect.objectContaining({
-        values: { field: initial.field, field2: initial.field2 },
-      }),
-    );
-  });
-
   // #3981 #3982
   test('fields validated meta should not be mutated when silently validating fields', async () => {
     let meta!: FieldMeta<any>;
@@ -832,25 +757,25 @@ describe('useForm()', () => {
     expect(formMeta.value.initialValues?.field?.name).toBe('1');
   });
 
-  describe('defineComponentBinds', () => {
+  describe('defineField', () => {
     test('creates bindable object to components', async () => {
       mountWithHoc({
         components: {
           ModelComp,
         },
         setup() {
-          const { defineComponentBinds, values, errors } = useForm({
+          const { defineField, values, errors } = useForm({
             validationSchema: yup.object({
               name: yup.string().required(),
             }),
           });
 
-          const field = defineComponentBinds('name');
+          const [model, props] = defineField('name');
 
-          return { field, values, errors };
+          return { props, model, values, errors };
         },
         template: `
-        <ModelComp v-bind="field" />
+        <ModelComp v-model="model" v-bind="props" />
         <span id="errors">{{ errors.name }}</span>
         <span id="values">{{ values.name }}</span>
       `,
@@ -876,18 +801,18 @@ describe('useForm()', () => {
           ModelComp,
         },
         setup() {
-          const { defineComponentBinds, values, errors } = useForm({
+          const { defineField, values, errors } = useForm({
             validationSchema: yup.object({
               name: yup.string().required(),
             }),
           });
 
-          const field = defineComponentBinds('name', { validateOnModelUpdate: false });
+          const [model, props] = defineField('name', { validateOnModelUpdate: false });
 
-          return { field, values, errors };
+          return { props, model, values, errors };
         },
         template: `
-        <ModelComp v-bind="field" />
+        <ModelComp v-model="model" v-bind="props" />
         <span id="errors">{{ errors.name }}</span>
         <span id="values">{{ values.name }}</span>
       `,
@@ -916,21 +841,21 @@ describe('useForm()', () => {
           ModelComp,
         },
         setup() {
-          const { defineComponentBinds } = useForm({
+          const { defineField } = useForm({
             validationSchema: yup.object({
               name: yup.string().required(),
             }),
           });
 
-          const field = defineComponentBinds('name', {
+          const [model, props] = defineField('name', {
             validateOnModelUpdate: true,
-            mapProps: state => ({ test: state.valid ? 'valid' : 'invalid' }),
+            props: state => ({ test: state.valid ? 'valid' : 'invalid' }),
           });
 
-          return { field };
+          return { model, props };
         },
         template: `
-        <ModelComp v-bind="field" />
+        <ModelComp v-model="model" v-bind="props" />
       `,
       });
 
@@ -949,21 +874,21 @@ describe('useForm()', () => {
           ModelComp,
         },
         setup() {
-          const { defineComponentBinds } = useForm({
+          const { defineField } = useForm({
             validationSchema: yup.object({
               name: yup.string().required(),
             }),
           });
 
-          const field = defineComponentBinds('name', state => ({
+          const [model, props] = defineField('name', state => ({
             props: { test: state.valid ? 'valid' : 'invalid' },
             validateOnModelUpdate: true,
           }));
 
-          return { field };
+          return { model, props };
         },
         template: `
-        <ModelComp v-bind="field" />
+        <ModelComp v-model="model" v-bind="props" />
       `,
       });
 
@@ -976,24 +901,24 @@ describe('useForm()', () => {
       expect(document.body.innerHTML).toContain('valid');
     });
 
-    test('can have custom model', async () => {
+    test('works with custom model', async () => {
       mountWithHoc({
         components: {
           CustomModelComp,
         },
         setup() {
-          const { defineComponentBinds, values, errors } = useForm({
+          const { defineField, values, errors } = useForm({
             validationSchema: yup.object({
               name: yup.string().required(),
             }),
           });
 
-          const field = defineComponentBinds('name', { model: 'value' });
+          const [model, props] = defineField('name');
 
-          return { field, values, errors };
+          return { model, props, values, errors };
         },
         template: `
-        <CustomModelComp v-bind="field" />
+        <CustomModelComp v-model:value="model" v-bind="props" />
         <span id="errors">{{ errors.name }}</span>
         <span id="values">{{ values.name }}</span>
       `,
@@ -1013,24 +938,21 @@ describe('useForm()', () => {
       expect(valuesEl?.textContent).toBe('123');
     });
 
-    test('can have lazy custom model', async () => {
+    test('creates bindable object to HTML inputs', async () => {
       mountWithHoc({
-        components: {
-          CustomModelComp,
-        },
         setup() {
-          const { defineComponentBinds, values, errors } = useForm({
+          const { defineField, values, errors } = useForm({
             validationSchema: yup.object({
               name: yup.string().required(),
             }),
           });
 
-          const field = defineComponentBinds('name', () => ({ model: 'value' }));
+          const [model, props] = defineField('name');
 
-          return { field, values, errors };
+          return { model, props, values, errors };
         },
         template: `
-        <CustomModelComp v-bind="field" />
+        <input v-model="model" v-bind="props" />
         <span id="errors">{{ errors.name }}</span>
         <span id="values">{{ values.name }}</span>
       `,
@@ -1049,24 +971,22 @@ describe('useForm()', () => {
       expect(errorEl?.textContent).toBe('');
       expect(valuesEl?.textContent).toBe('123');
     });
-  });
 
-  describe('defineInputBinds', () => {
-    test('creates bindable object to HTML inputs', async () => {
+    test('can configure the validation events', async () => {
       mountWithHoc({
         setup() {
-          const { defineInputBinds, values, errors } = useForm({
+          const { defineField, values, errors } = useForm({
             validationSchema: yup.object({
               name: yup.string().required(),
             }),
           });
 
-          const field = defineInputBinds('name');
+          const [model, props] = defineField('name', { validateOnInput: true });
 
-          return { field, values, errors };
+          return { model, props, values, errors };
         },
         template: `
-        <input v-bind="field" />
+        <input v-model="model" v-bind="props" />
         <span id="errors">{{ errors.name }}</span>
         <span id="values">{{ values.name }}</span>
       `,
@@ -1076,66 +996,65 @@ describe('useForm()', () => {
       const errorEl = document.getElementById('errors');
       const valuesEl = document.getElementById('values');
       setValue(document.querySelector('input') as any, '');
-      dispatchEvent(document.querySelector('input') as any, 'blur');
       await flushPromises();
       expect(errorEl?.textContent).toBe('name is a required field');
       setValue(document.querySelector('input') as any, '123');
-      dispatchEvent(document.querySelector('input') as any, 'blur');
       await flushPromises();
       expect(errorEl?.textContent).toBe('');
       expect(valuesEl?.textContent).toBe('123');
     });
 
-    test('can configure the validation events', async () => {
+    test('can pass extra props', async () => {
       mountWithHoc({
         setup() {
-          const { defineInputBinds, values, errors } = useForm({
+          const { defineField } = useForm({
             validationSchema: yup.object({
               name: yup.string().required(),
             }),
           });
 
-          const field = defineInputBinds('name', { validateOnInput: true });
+          const [model, props] = defineField('name', {
+            validateOnInput: true,
+            props: state => ({ 'aria-valid': state.valid ? 'true' : 'false' }),
+          });
 
-          return { field, values, errors };
+          return { model, props };
         },
         template: `
-        <input v-bind="field" />
-        <span id="errors">{{ errors.name }}</span>
-        <span id="values">{{ values.name }}</span>
+        <input v-model="model" v-bind="props" />
       `,
       });
 
       await flushPromises();
-      const errorEl = document.getElementById('errors');
-      const valuesEl = document.getElementById('values');
       setValue(document.querySelector('input') as any, '');
       await flushPromises();
-      expect(errorEl?.textContent).toBe('name is a required field');
+      expect(document.body.innerHTML).toContain('aria-valid="false"');
       setValue(document.querySelector('input') as any, '123');
       await flushPromises();
-      expect(errorEl?.textContent).toBe('');
-      expect(valuesEl?.textContent).toBe('123');
+      expect(document.body.innerHTML).toContain('aria-valid="true"');
     });
 
-    test('can pass extra props', async () => {
+    test('can have lazy config', async () => {
       mountWithHoc({
+        components: {
+          ModelComp,
+        },
         setup() {
-          const { defineInputBinds } = useForm({
+          const { defineField } = useForm({
             validationSchema: yup.object({
               name: yup.string().required(),
             }),
           });
 
-          const field = defineInputBinds('name', {
-            validateOnInput: true,
-            mapAttrs: state => ({ 'aria-valid': state.valid ? 'true' : 'false' }),
-          });
+          const [model, props] = defineField('name', state => ({
+            props: { 'aria-valid': state.valid ? 'true' : 'false' },
+            validateOnModelUpdate: true,
+          }));
 
-          return { field };
+          return { model, props };
         },
         template: `
-        <input v-bind="field" />
+        <input v-model="model" v-bind="props" />
       `,
       });
 
@@ -1148,37 +1067,38 @@ describe('useForm()', () => {
       expect(document.body.innerHTML).toContain('aria-valid="true"');
     });
 
-    test('can have lazy config', async () => {
+    test('can specify a label', async () => {
+      defineRule('required', (value: string) => {
+        return !!value;
+      });
+
+      configure({
+        generateMessage: ({ field }) => `${field} is bad`,
+      });
+
       mountWithHoc({
-        components: {
-          ModelComp,
-        },
         setup() {
-          const { defineInputBinds } = useForm({
-            validationSchema: yup.object({
-              name: yup.string().required(),
-            }),
+          const { defineField, values, errors } = useForm({
+            validationSchema: {
+              name: 'required',
+            },
           });
 
-          const field = defineInputBinds('name', state => ({
-            attrs: { 'aria-valid': state.valid ? 'true' : 'false' },
-            validateOnModelUpdate: true,
-          }));
+          const [model, props] = defineField('name', { validateOnInput: true, label: 'First Name' });
 
-          return { field };
+          return { model, props, values, errors };
         },
         template: `
-        <input v-bind="field" />
+        <input v-model="model" v-bind="props" />
+        <span id="errors">{{ errors.name }}</span>
       `,
       });
 
       await flushPromises();
+      const errorEl = document.getElementById('errors');
       setValue(document.querySelector('input') as any, '');
       await flushPromises();
-      expect(document.body.innerHTML).toContain('aria-valid="false"');
-      setValue(document.querySelector('input') as any, '123');
-      await flushPromises();
-      expect(document.body.innerHTML).toContain('aria-valid="true"');
+      expect(errorEl?.textContent).toBe('First Name is bad');
     });
   });
 
diff --git a/packages/yup/package.json b/packages/yup/package.json
index 970bfb532..068b85f1d 100644
--- a/packages/yup/package.json
+++ b/packages/yup/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vee-validate/yup",
-  "version": "4.11.8",
+  "version": "4.12.0-alpha.1",
   "description": "vee-validate integration with yup schema validation",
   "author": "Abdelrahman Awad <logaretm1@gmail.com>",
   "license": "MIT",
diff --git a/packages/yup/tests/yup.spec.ts b/packages/yup/tests/yup.spec.ts
index 9d6c2d5da..54f5834f5 100644
--- a/packages/yup/tests/yup.spec.ts
+++ b/packages/yup/tests/yup.spec.ts
@@ -105,12 +105,13 @@ test('validates typed schema form with yup', async () => {
         }),
       );
 
-      const { useFieldModel, errors } = useForm({
+      const { defineField, errors } = useForm({
         validationSchema: schema,
         validateOnMount: true,
       });
 
-      const [email, password] = useFieldModel(['email', 'password']);
+      const [email] = defineField('email', { validateOnModelUpdate: true });
+      const [password] = defineField('password', { validateOnModelUpdate: true });
 
       return {
         schema,
@@ -162,12 +163,13 @@ test('shows multiple errors using error bag', async () => {
         }),
       );
 
-      const { useFieldModel, errorBag } = useForm({
+      const { defineField, errorBag } = useForm({
         validationSchema: schema,
         validateOnMount: true,
       });
 
-      const [email, password] = useFieldModel(['email', 'password']);
+      const [email] = defineField('email', { validateOnModelUpdate: true });
+      const [password] = defineField('password', { validateOnModelUpdate: true });
 
       return {
         schema,
diff --git a/packages/zod/package.json b/packages/zod/package.json
index 56402ecd0..12e2db8fb 100644
--- a/packages/zod/package.json
+++ b/packages/zod/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vee-validate/zod",
-  "version": "4.11.8",
+  "version": "4.12.0-alpha.1",
   "description": "vee-validate integration with zod schema validation",
   "author": "Abdelrahman Awad <logaretm1@gmail.com>",
   "license": "MIT",
diff --git a/packages/zod/tests/zod.spec.ts b/packages/zod/tests/zod.spec.ts
index 4f74f49c8..053fd5fe4 100644
--- a/packages/zod/tests/zod.spec.ts
+++ b/packages/zod/tests/zod.spec.ts
@@ -78,12 +78,13 @@ test('shows multiple errors using error bag', async () => {
         }),
       );
 
-      const { useFieldModel, errorBag } = useForm({
+      const { defineField, errorBag } = useForm({
         validationSchema: schema,
         validateOnMount: true,
       });
 
-      const [email, password] = useFieldModel(['email', 'password']);
+      const [email] = defineField('email', { validateOnModelUpdate: true });
+      const [password] = defineField('password', { validateOnModelUpdate: true });
 
       return {
         schema,
@@ -135,12 +136,13 @@ test('validates typed schema form with zod', async () => {
         }),
       );
 
-      const { useFieldModel, errors } = useForm({
+      const { defineField, errors } = useForm({
         validationSchema: schema,
         validateOnMount: true,
       });
 
-      const [email, password] = useFieldModel(['email', 'password']);
+      const [email] = defineField('email', { validateOnModelUpdate: true });
+      const [password] = defineField('password', { validateOnModelUpdate: true });
 
       return {
         schema,
@@ -198,11 +200,12 @@ test('handles zod union errors', async () => {
 
       const bothOrNeither = schema.or(schemaBothUndefined);
 
-      const { useFieldModel, errors } = useForm({
+      const { defineField, errors } = useForm({
         validationSchema: toTypedSchema(bothOrNeither),
       });
 
-      const [email, name] = useFieldModel(['email', 'name']);
+      const [email] = defineField('email', { validateOnModelUpdate: true });
+      const [name] = defineField('name', { validateOnModelUpdate: true });
 
       return {
         schema,