docs(form): use useTemplateRef

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"