docs(form): use useTemplateRef

docs/app/components/content/examples/form/FormExampleElements.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { z } from 'zod'
-import type { FormSubmitEvent, Form } from '@nuxt/ui'
+import type { FormSubmitEvent } from '@nuxt/ui'
 
 const schema = z.object({
   input: z.string().min(10),
@@ -35,7 +35,8 @@ const schema = z.object({
 type Schema = z.output<typeof schema>
 
 const state = reactive<Partial<Schema>>({})
-const form = ref<Form<Schema>>()
+
+const form = useTemplateRef('form')
 
 const items = [
   { label: 'Option 1', value: 'option-1' },

docs/app/components/content/examples/form/FormExampleNestedList.vue

@@ -31,9 +31,9 @@ function removeItem() {
     state.items.pop()
   }
 }
-const formItemRef = ref()
 
 const toast = useToast()
+
 async function onSubmit(event: FormSubmitEvent<any>) {
   toast.add({ title: 'Success', description: 'The form has been submitted.', color: 'success' })
   console.log(event.data)
@@ -42,7 +42,6 @@ async function onSubmit(event: FormSubmitEvent<any>) {
 
 <template>
   <UForm
-    ref="formItemRef"
     :state="state"
     :schema="schema"
     class="gap-4 flex flex-col w-60"

docs/content/3.components/form.md

@@ -167,7 +167,19 @@ name: 'form-example-nested-list'
 
 ### Expose
 
-When accessing the component via a template ref, you can use the following:
+You can access the typed component instance using [`useTemplateRef`](https://vuejs.org/api/composition-api-helpers.html#usetemplateref).
+
+```vue
+<script setup lang="ts">
+const form = useTemplateRef('form')
+</script>
+
+<template>
+  <UForm ref="form" />
+</template>
+```
+
+This will give you access to the following:
 
 | Name | Type |
 | ---- | ---- |

playground/app/components/FormElementsExample.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { z } from 'zod'
-import type { FormSubmitEvent, Form } from '@nuxt/ui'
+import type { FormSubmitEvent } from '@nuxt/ui'
 
 const schema = z.object({
   input: z.string().min(10),
@@ -35,7 +35,8 @@ const schema = z.object({
 type Schema = z.output<typeof schema>
 
 const state = reactive<Partial<Schema>>({})
-const form = ref<Form<Schema>>()
+
+const form = useTemplateRef('form')
 
 const items = [
   { label: 'Option 1', value: 'option-1' },

playground/app/components/FormNestedListExample.vue

@@ -30,7 +30,6 @@ function removeItem() {
     state.items.pop()
   }
 }
-const formItemRef = ref()
 
 function onSubmit(event: FormSubmitEvent<Schema>) {
   console.log('Success', event.data)
@@ -43,7 +42,6 @@ function onError(event: any) {
 
 <template>
   <UForm
-    ref="formItemRef"
     :state="state"
     :schema="schema"
     class="gap-4 flex flex-col w-60"