docs: add more info about v-model.lazy in input.md and form.md

apps/www/__registry__/index.ts

@@ -401,6 +401,13 @@ export const Index = {
       component: () => import('../src/lib/registry/default/example/InputWithLabel.vue').then(m => m.default),
       files: ['../src/lib/registry/default/example/InputWithLabel.vue'],
     },
+    InputLazyDemo: {
+      name: 'InputLazyDemo',
+      type: 'components:example',
+      registryDependencies: ['input', 'button'],
+      component: () => import('../src/lib/registry/default/example/InputLazyDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/InputLazyDemo.vue'],
+    },
     LabelDemo: {
       name: 'LabelDemo',
       type: 'components:example',

apps/www/src/content/docs/components/form.md

@@ -336,3 +336,16 @@ See the following links for more examples on how to use the `vee-validate` featu
 This example shows how to add motion to your forms with [Formkit AutoAnimate](https://auto-animate.formkit.com/)
 
 <ComponentPreview name="InputFormAutoAnimate" />
+
+
+This example show how to use `v-model.lazy`-like in VeeValidate with `validateOnChange`
+
+<Callout class="mt-4">
+
+`v-model` modifiers don't work on custom Vue components
+
+</Callout>
+
+<ComponentPreview name="InputLazyForm" />
+
+

apps/www/src/content/docs/components/input.md

@@ -63,10 +63,18 @@ import { Input } from '@/components/ui/input'
 
 <ComponentPreview name="InputWithButton" class="max-w-xs" />
 
+### Lazy (v-model.lazy)
+
+<Callout class="mt-4">
+
+`v-model` modifiers don't work on custom Vue components,
+
+instead you can use `@change` event on custom Vue component
+
+</Callout>
+
+<ComponentPreview name="InputLazyDemo" class="max-w-xs" />
+
 ### Form
 
 <ComponentPreview name="InputForm" />
-
-#### v-model.lazy binding
-
-<ComponentPreview name="InputLazyForm" />

apps/www/src/lib/registry/default/example/InputLazyDemo.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Input } from '@/lib/registry/default/ui/input'
+
+const emailRef = ref('')
+</script>
+
+<template>
+  <div class="w-full">
+    <Input type="email" placeholder="Email" @change="event => emailRef = event.target.value" />
+
+    <div>
+      {{ emailRef }}
+    </div>
+  </div>
+</template>

apps/www/src/lib/registry/new-york/example/InputLazyDemo.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Input } from '@/lib/registry/new-york/ui/input'
+
+const emailRef = ref('')
+</script>
+
+<template>
+  <div class="w-full">
+    <Input type="email" placeholder="Email" @change="event => emailRef = event.target.value" />
+
+    <div>
+      {{ emailRef }}
+    </div>
+  </div>
+</template>