[v3 docs] Form nesting forms doesnt work

[MickL]

For what version of Nuxt UI are you suggesting this?

v3.x

Description

For Form the example about nesting forms doesnt fully work out:

1. When activating the checkbox and adding an email, and then deactivating the checkbox, the email stays in the state object.
2. When submitting with checkbox activated and email inserted, the email is not part of the submit data.
3. There is a small issue: news is a require boolean, therefor the form never submits when the checkbox has not been touched. Should be: news: z.boolean().default(false)

---

Btw. I think an example about nesting forms is very important because it is a common tasks to have compose a form out of multiple components. BUT maybe another example could be added because the same can be archived with a single schema and descrimination union:

const baseSchema = z.object({
  name: z.string().min(2),
  news: z.boolean().default(false),
});
const schema = z.discriminatedUnion("news", [
  baseSchema.extend({ news: z.literal(true), email: z.string().email() }),
  baseSchema.extend({ news: z.literal(false) }),
]);

Maybe this would be even a better solution for the checkbox use case. It should fix #1 and #2, but it doesnt work for nested forms this way.

Additional context

No response

[romhml]

The missing data from the submit payload is a regression introduced with this PR that apply transformations on the state before calling the @submit callback. We're missing a part to get transformations from nested payloads. I'll look into a solution!