docs: improve form docs (#761)

Co-authored-by: Haytham A. Salama <haythamasalama@gmail.com>

docs/components/content/examples/FormExampleBasic.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
-import { ref } from 'vue'
 import type { FormError, FormSubmitEvent } from '@nuxt/ui/dist/runtime/types'
 
-const state = ref({
+const state = reactive({
   email: undefined,
   password: undefined
 })

docs/components/content/examples/FormExampleElements.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { ref } from 'vue'
 import { z } from 'zod'
 import type { FormSubmitEvent } from '@nuxt/ui/dist/runtime/types'
 
@@ -9,7 +8,7 @@ const options = [
   { label: 'Option 3', value: 'option-3' }
 ]
 
-const state = ref({
+const state = reactive({
   input: undefined,
   textarea: undefined,
   select: undefined,

docs/components/content/examples/FormExampleJoi.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { ref } from 'vue'
 import Joi from 'joi'
 import type { FormSubmitEvent } from '@nuxt/ui/dist/runtime/types'
 
@@ -10,7 +9,7 @@ const schema = Joi.object({
     .required()
 })
 
-const state = ref({
+const state = reactive({
   email: undefined,
   password: undefined
 })

docs/components/content/examples/FormExampleValibot.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { ref } from 'vue'
 import { string, objectAsync, email, minLength, Input } from 'valibot'
 import type { FormSubmitEvent } from '@nuxt/ui/dist/runtime/types'
 
@@ -10,7 +9,7 @@ const schema = objectAsync({
 
 type Schema = Input<typeof schema>
 
-const state = ref({
+const state = reactive({
   email: undefined,
   password: undefined
 })

docs/components/content/examples/FormExampleYup.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { ref } from 'vue'
 import { object, string, InferType } from 'yup'
 import type { FormSubmitEvent } from '@nuxt/ui/dist/runtime/types'
 
@@ -12,7 +11,7 @@ const schema = object({
 
 type Schema = InferType<typeof schema>
 
-const state = ref({
+const state = reactive({
   email: undefined,
   password: undefined
 })

docs/components/content/examples/FormExampleZod.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { ref } from 'vue'
 import { z } from 'zod'
 import type { FormSubmitEvent } from '@nuxt/ui/dist/runtime/types'
 
@@ -10,7 +9,7 @@ const schema = z.object({
 
 type Schema = z.output<typeof schema>
 
-const state = ref({
+const state = reactive({
   email: undefined,
   password: undefined
 })