From 0f96ec931a3ffd1084ea2a3c16be6a796921c877 Mon Sep 17 00:00:00 2001
From: Patrick Roza <contact@patrickroza.com>
Date: Tue, 30 Sep 2025 16:10:58 +0200
Subject: [PATCH 01/11] add dirty checks

---
 packages/vue-components/stories/OmegaForm/ComplexForm.vue | 2 ++
 packages/vue-components/stories/OmegaForm/SimpleForm.vue  | 6 +++---
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/vue-components/stories/OmegaForm/ComplexForm.vue b/packages/vue-components/stories/OmegaForm/ComplexForm.vue
index 6a8df5356d..8487aae56c 100644
--- a/packages/vue-components/stories/OmegaForm/ComplexForm.vue
+++ b/packages/vue-components/stories/OmegaForm/ComplexForm.vue
@@ -1,5 +1,6 @@
 <template>
   <exampleForm.Form>
+    <div>isDirty: {{ isDirty }}</div>
     <exampleForm.Input
       label="aString"
       name="aString"
@@ -115,4 +116,5 @@ const exampleForm = useOmegaForm(
     }
   }
 )
+const isDirty = exampleForm.useStore((_) => _.isDirty)
 </script>
diff --git a/packages/vue-components/stories/OmegaForm/SimpleForm.vue b/packages/vue-components/stories/OmegaForm/SimpleForm.vue
index 1de03f038e..7017ac4b31 100644
--- a/packages/vue-components/stories/OmegaForm/SimpleForm.vue
+++ b/packages/vue-components/stories/OmegaForm/SimpleForm.vue
@@ -1,7 +1,7 @@
 <template>
-  <form.Form :subscribe="['values']">
-    <template #default="{ subscribedValues: { values } }">
-      <div>values: {{ values }}</div>
+  <form.Form :subscribe="['values', 'isDirty']">
+    <template #default="{ subscribedValues: { values, isDirty } }">
+      <div>values: {{ values }} {{ isDirty }}</div>
       <form.Input
         label="asder2"
         name="asder2"

From 1513f5753e8a5d4e64b5cf542160d474f3591ca7 Mon Sep 17 00:00:00 2001
From: Patrick Roza <contact@patrickroza.com>
Date: Tue, 30 Sep 2025 17:03:01 +0200
Subject: [PATCH 02/11] improve: empty conversion handling

---
 .../src/components/OmegaForm/InputProps.ts    |  1 +
 .../OmegaForm/OmegaInputVuetify.vue           | 20 ++++++-------
 .../OmegaForm/OmegaInternalInput.vue          | 30 +++++++++----------
 3 files changed, 26 insertions(+), 25 deletions(-)

diff --git a/packages/vue-components/src/components/OmegaForm/InputProps.ts b/packages/vue-components/src/components/OmegaForm/InputProps.ts
index df259a7705..2933b60040 100644
--- a/packages/vue-components/src/components/OmegaForm/InputProps.ts
+++ b/packages/vue-components/src/components/OmegaForm/InputProps.ts
@@ -36,6 +36,7 @@ export type InputProps<From extends Record<PropertyKey, any>, TName extends Deep
   min?: number | false
   name: string
   modelValue: DeepValue<From, TName>
+  handleChange: (value: DeepValue<From, TName>) => void
   errorMessages: string[]
   error: boolean
   field: OmegaFieldInternalApi<From, TName>
diff --git a/packages/vue-components/src/components/OmegaForm/OmegaInputVuetify.vue b/packages/vue-components/src/components/OmegaForm/OmegaInputVuetify.vue
index 7f20ee576f..fcb67aee3c 100644
--- a/packages/vue-components/src/components/OmegaForm/OmegaInputVuetify.vue
+++ b/packages/vue-components/src/components/OmegaForm/OmegaInputVuetify.vue
@@ -15,7 +15,7 @@
       ripple
       v-bind="$attrs"
       :model-value="vuetifyValue"
-      @change="(e: any) => inputProps.field.handleChange(e.target.checked)"
+      @change="(e: any) => inputProps.handleChange(e.target.checked)"
     />
     <v-text-field
       v-if="inputProps.type === 'email' || inputProps.type === 'string' || inputProps.type === 'password'"
@@ -30,7 +30,7 @@
       :error="inputProps.error"
       v-bind="$attrs"
       :model-value="vuetifyValue"
-      @update:model-value="inputProps.field.handleChange"
+      @update:model-value="inputProps.handleChange"
     />
     <v-textarea
       v-if="inputProps.type === 'text'"
@@ -44,7 +44,7 @@
       :error="inputProps.error"
       v-bind="$attrs"
       :model-value="vuetifyValue"
-      @update:model-value="inputProps.field.handleChange"
+      @update:model-value="inputProps.handleChange"
     />
     <component
       :is="inputProps.type === 'range' ? 'v-slider' : 'v-text-field'"
@@ -62,9 +62,9 @@
       :model-value="vuetifyValue"
       @update:model-value="(e: any) => {
         if (e || e === 0) {
-          inputProps.field.handleChange(Number(e) as any)
+          inputProps.handleChange(Number(e) as any)
         } else {
-          inputProps.field.handleChange(undefined as any)
+          inputProps.handleChange(undefined as any)
         }
       }"
     />
@@ -77,7 +77,7 @@
         :error="inputProps.error"
         v-bind="$attrs"
         :model-value="vuetifyValue"
-        @update:model-value="inputProps.field.handleChange"
+        @update:model-value="inputProps.handleChange"
       >
         <v-radio
           v-for="option in inputProps.options"
@@ -101,8 +101,8 @@
       :error="inputProps.error"
       v-bind="$attrs"
       :model-value="vuetifyValue"
-      @clear="inputProps.field.handleChange(undefined as any)"
-      @update:model-value="inputProps.field.handleChange"
+      @clear="inputProps.handleChange(undefined as any)"
+      @update:model-value="inputProps.handleChange"
     />
 
     <v-autocomplete
@@ -120,8 +120,8 @@
       :chips="inputProps.type === 'autocompletemultiple'"
       v-bind="$attrs"
       :model-value="vuetifyValue"
-      @clear="inputProps.field.handleChange(undefined as any)"
-      @update:model-value="inputProps.field.handleChange"
+      @clear="inputProps.handleChange(undefined as any)"
+      @update:model-value="inputProps.handleChange"
     />
   </div>
 </template>
diff --git a/packages/vue-components/src/components/OmegaForm/OmegaInternalInput.vue b/packages/vue-components/src/components/OmegaForm/OmegaInternalInput.vue
index 3381d14db4..18e6c69495 100644
--- a/packages/vue-components/src/components/OmegaForm/OmegaInternalInput.vue
+++ b/packages/vue-components/src/components/OmegaForm/OmegaInternalInput.vue
@@ -20,7 +20,7 @@
   generic="From extends Record<PropertyKey, any>, Name extends DeepKeys<From>"
 >
 import { type DeepKeys, useStore } from "@tanstack/vue-form"
-import { computed, type ComputedRef, getCurrentInstance, nextTick, onMounted, onUnmounted, ref, useId, watch, watchEffect } from "vue"
+import { computed, type ComputedRef, getCurrentInstance, onMounted, onUnmounted, ref, useId, watch, watchEffect } from "vue"
 import type { InputProps, OmegaFieldInternalApi } from "./InputProps"
 import type { FieldValidators, MetaRecord, NestedKeyOf, TypeOverride } from "./OmegaFormStuff"
 import OmegaInputVuetify from "./OmegaInputVuetify.vue"
@@ -67,21 +67,20 @@ const isFalsyButNotZero = (value: unknown): boolean => {
 }
 
 // we remove value and errors when the field is empty and not required
-// watchEffect will trigger infinite times with both free fieldValue and errors, so bet to watch a stupid boolean
-watch(
-  () => !!fieldValue.value,
-  () => {
-    if (isFalsyButNotZero(fieldValue.value) && props.meta?.type !== "boolean") {
-      nextTick(() => {
-        fieldApi.setValue(
-          props.meta?.nullableOrUndefined === "undefined"
-            ? undefined
-            : null as any
-        )
-      })
-    }
+
+// convert nullish value to null or undefined based on schema
+const handleChange: OmegaFieldInternalApi<From, Name>["handleChange"] = (value) => {
+  if (isFalsyButNotZero(value) && props.meta?.type !== "boolean") {
+    props.field.handleChange(
+      props.meta?.nullableOrUndefined === "undefined"
+        ? undefined
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        : null as any
+    )
+  } else {
+    props.field.handleChange(value)
   }
-)
+}
 
 onMounted(() => {
   if (
@@ -153,6 +152,7 @@ const inputProps: ComputedRef<InputProps<From, Name>> = computed(() => ({
   min: props.meta?.type === "number" && props.meta?.minimum,
   name: props.field.name,
   modelValue: props.field.state.value,
+  handleChange,
   errorMessages: showedErrors.value,
   error: !!showedErrors.value.length,
   field: props.field,

From 1665e2f26b2561e2035fb81e5c4bdb6d6ef28eff Mon Sep 17 00:00:00 2001
From: Patrick Roza <contact@patrickroza.com>
Date: Tue, 30 Sep 2025 17:45:56 +0200
Subject: [PATCH 03/11] add Null story

---
 .../stories/OmegaForm.stories.ts              |  8 ++
 .../vue-components/stories/OmegaForm/Null.vue | 75 +++++++++++++++++++
 2 files changed, 83 insertions(+)
 create mode 100644 packages/vue-components/stories/OmegaForm/Null.vue

diff --git a/packages/vue-components/stories/OmegaForm.stories.ts b/packages/vue-components/stories/OmegaForm.stories.ts
index 0b0f0dd0de..0793977789 100644
--- a/packages/vue-components/stories/OmegaForm.stories.ts
+++ b/packages/vue-components/stories/OmegaForm.stories.ts
@@ -14,6 +14,7 @@ import EmailFormComponent from "./OmegaForm/EmailForm.vue"
 import FormInputComponent from "./OmegaForm/form.Input.vue"
 import IntersectionExampleComponent from "./OmegaForm/IntersectionExample.vue"
 import MetaFormComponent from "./OmegaForm/Meta.vue"
+import NullComponent from "./OmegaForm/Null.vue"
 import OneHundredWaysToWriteAFormComponent from "./OmegaForm/OneHundredWaysToWriteAForm.vue"
 import PersistencyFormComponent from "./OmegaForm/PersistencyForm.vue"
 import ProgrammaticallyHandleSubmitCheckErrorsComponent from "./OmegaForm/ProgrammaticallyHandleSubmitCheckErrors.vue"
@@ -183,3 +184,10 @@ export const ProgrammaticallyHandleSubmitCheckErrors: Story = {
     template: "<ProgrammaticallyHandleSubmitCheckErrorsComponent />"
   })
 }
+
+export const Null: Story = {
+  render: () => ({
+    components: { NullComponent },
+    template: "<NullComponent />"
+  })
+}
diff --git a/packages/vue-components/stories/OmegaForm/Null.vue b/packages/vue-components/stories/OmegaForm/Null.vue
new file mode 100644
index 0000000000..3cfc99cf59
--- /dev/null
+++ b/packages/vue-components/stories/OmegaForm/Null.vue
@@ -0,0 +1,75 @@
+<template>
+  <exampleForm.Form>
+    <div>isDirty: {{ isDirty }}</div>
+    <exampleForm.Input
+      label="aString"
+      name="aString"
+    />
+    <exampleForm.Input
+      label="aStringMin2Max3Undefined"
+      name="aStringMin2Max3Undefined"
+    />
+    <exampleForm.Input
+      label="aNumberMin2Max4Nullable"
+      name="aNumberMin2Max4Nullable"
+    />
+    <button>Submit</button>
+    <button
+      type="reset"
+      @click.prevent="exampleForm.clear()"
+    >
+      Clear
+    </button>
+    <button
+      type="button"
+      @click="exampleForm.reset()"
+    >
+      Reset
+    </button>
+    <exampleForm.Errors />
+  </exampleForm.Form>
+</template>
+
+<script setup lang="ts">
+import { S } from "effect-app"
+import { watch } from "vue"
+import { useOmegaForm } from "../../src/components/OmegaForm"
+
+const exampleForm = useOmegaForm(
+  S.Struct({
+    aString: S.String,
+    aStringMin2Max3Undefined: S.UndefinedOr(
+      S.String.pipe(S.minLength(2)).pipe(S.maxLength(3))
+    ),
+    aNumberMin2Max4Nullable: S.NullOr(S.Number.pipe(S.between(2, 4)))
+  }),
+  {
+    defaultValues: {
+      aString: "",
+      aNumberMin2Max4Nullable: null
+    },
+    onSubmit: async ({
+      value
+    }: {
+      value: {
+        aString: string
+        aStringMin2Max3Undefined?: string
+        aNumberMin2Max4Nullable: number | null
+      }
+    }) => {
+      console.log(value)
+    }
+  },
+  {
+    persistency: {
+      policies: ["local"],
+      overrideDefaultValues: true
+    }
+  }
+)
+const isDirty = exampleForm.useStore((_) => _.isDirty)
+const values = exampleForm.useStore((_) => _.values)
+watch(values, (v) => {
+  console.log("values changed", v)
+})
+</script>

From 958835f787b527e06a3bcbb24f7ca0cd0e2e091f Mon Sep 17 00:00:00 2001
From: Patrick Roza <contact@patrickroza.com>
Date: Tue, 30 Sep 2025 17:49:03 +0200
Subject: [PATCH 04/11] Let's be explicit about nullable vs optional.

---
 packages/vue-components/stories/OmegaForm/ComplexForm.vue | 8 ++++----
 packages/vue-components/stories/OmegaForm/Null.vue        | 8 ++++----
 packages/vue-components/stories/OmegaForm/form.Input.vue  | 8 ++++----
 3 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/packages/vue-components/stories/OmegaForm/ComplexForm.vue b/packages/vue-components/stories/OmegaForm/ComplexForm.vue
index 8487aae56c..5fc3ff72ed 100644
--- a/packages/vue-components/stories/OmegaForm/ComplexForm.vue
+++ b/packages/vue-components/stories/OmegaForm/ComplexForm.vue
@@ -14,8 +14,8 @@
       name="aStringMin2Max4"
     />
     <exampleForm.Input
-      label="aStringMin2Max3Nullable"
-      name="aStringMin2Max3Nullable"
+      label="aStringMin2Max3Optional"
+      name="aStringMin2Max3Optional"
     />
     <exampleForm.Input
       label="aNumber"
@@ -80,7 +80,7 @@ const exampleForm = useOmegaForm(
     aString: S.String,
     aStringMin2: S.String.pipe(S.minLength(2)),
     aStringMin2Max4: S.String.pipe(S.minLength(2)).pipe(S.maxLength(4)),
-    aStringMin2Max3Nullable: S.UndefinedOr(
+    aStringMin2Max3Optional: S.UndefinedOr(
       S.String.pipe(S.minLength(2)).pipe(S.maxLength(3))
     ),
     aNumber: S.Number,
@@ -98,7 +98,7 @@ const exampleForm = useOmegaForm(
         aString: string
         aStringMin2: string
         aStringMin2Max4: string
-        aStringMin2Max3Nullable?: string
+        aStringMin2Max3Optional?: string
         aNumber: number
         aNumberMin2: number
         aNumberMin2Max: number
diff --git a/packages/vue-components/stories/OmegaForm/Null.vue b/packages/vue-components/stories/OmegaForm/Null.vue
index 3cfc99cf59..589a34a880 100644
--- a/packages/vue-components/stories/OmegaForm/Null.vue
+++ b/packages/vue-components/stories/OmegaForm/Null.vue
@@ -6,8 +6,8 @@
       name="aString"
     />
     <exampleForm.Input
-      label="aStringMin2Max3Undefined"
-      name="aStringMin2Max3Undefined"
+      label="aStringMin2Max3Optional"
+      name="aStringMin2Max3Optional"
     />
     <exampleForm.Input
       label="aNumberMin2Max4Nullable"
@@ -38,7 +38,7 @@ import { useOmegaForm } from "../../src/components/OmegaForm"
 const exampleForm = useOmegaForm(
   S.Struct({
     aString: S.String,
-    aStringMin2Max3Undefined: S.UndefinedOr(
+    aStringMin2Max3Optional: S.UndefinedOr(
       S.String.pipe(S.minLength(2)).pipe(S.maxLength(3))
     ),
     aNumberMin2Max4Nullable: S.NullOr(S.Number.pipe(S.between(2, 4)))
@@ -53,7 +53,7 @@ const exampleForm = useOmegaForm(
     }: {
       value: {
         aString: string
-        aStringMin2Max3Undefined?: string
+        aStringMin2Max3Optional?: string
         aNumberMin2Max4Nullable: number | null
       }
     }) => {
diff --git a/packages/vue-components/stories/OmegaForm/form.Input.vue b/packages/vue-components/stories/OmegaForm/form.Input.vue
index 02331ced5e..59fe7113ae 100644
--- a/packages/vue-components/stories/OmegaForm/form.Input.vue
+++ b/packages/vue-components/stories/OmegaForm/form.Input.vue
@@ -31,8 +31,8 @@
       name="aStringMin2Max4"
     />
     <exampleForm.Input
-      label="aStringMin2Max3Nullable"
-      name="aStringMin2Max3Nullable"
+      label="aStringMin2Max3Optional"
+      name="aStringMin2Max3Optional"
     />
     <exampleForm.Input
       label="aNumber"
@@ -83,7 +83,7 @@ const schema = S.Struct({
   aString: S.String,
   aStringMin2: S.String.pipe(S.minLength(2)),
   aStringMin2Max4: S.String.pipe(S.minLength(2)).pipe(S.maxLength(4)),
-  aStringMin2Max3Nullable: S.UndefinedOr(
+  aStringMin2Max3Optional: S.UndefinedOr(
     S.String.pipe(S.minLength(2)).pipe(S.maxLength(3))
   ),
   aNumber: S.Number,
@@ -109,7 +109,7 @@ const exampleForm = useOmegaForm(
         aString: string
         aStringMin2: string
         aStringMin2Max4: string
-        aStringMin2Max3Nullable?: string
+        aStringMin2Max3Optional?: string
         aNumber: number
         aNumberMin2: number
         aNumberMin2Max: number

From 2a8db47a03b30ba19fa99fe58cacc058b0ff013b Mon Sep 17 00:00:00 2001
From: Patrick Roza <contact@patrickroza.com>
Date: Tue, 30 Sep 2025 17:56:15 +0200
Subject: [PATCH 05/11] handle required status properly for String: "" is a
 valid value, thus the field is not required from the user perspective.

---
 .../__tests__/OmegaForm/IntersectionError.test.ts         | 4 ++--
 .../src/components/OmegaForm/OmegaFormStuff.ts            | 8 +++++++-
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/packages/vue-components/__tests__/OmegaForm/IntersectionError.test.ts b/packages/vue-components/__tests__/OmegaForm/IntersectionError.test.ts
index 9e1439097e..88998294b4 100644
--- a/packages/vue-components/__tests__/OmegaForm/IntersectionError.test.ts
+++ b/packages/vue-components/__tests__/OmegaForm/IntersectionError.test.ts
@@ -43,12 +43,12 @@ const mockComponents = {
 describe("OmegaForm Intersection/Union", () => {
   const AlphaSchema = S.Struct({
     first: S.Literal("alpha"),
-    alpha: S.String
+    alpha: S.NonEmptyString
   })
 
   const BetaSchema = S.Struct({
     first: S.Literal("beta"),
-    beta: S.String
+    beta: S.NonEmptyString
   })
 
   const MySchema = S.Struct({
diff --git a/packages/vue-components/src/components/OmegaForm/OmegaFormStuff.ts b/packages/vue-components/src/components/OmegaForm/OmegaFormStuff.ts
index ae3679ef1e..819482d310 100644
--- a/packages/vue-components/src/components/OmegaForm/OmegaFormStuff.ts
+++ b/packages/vue-components/src/components/OmegaForm/OmegaFormStuff.ts
@@ -1,5 +1,6 @@
 import { type Effect, Option, pipe, type Record, S } from "effect-app"
 /* eslint-disable @typescript-eslint/no-explicit-any */
+import { getMetadataFromSchema } from "@effect-app/vue/form"
 import { type DeepKeys, type FieldAsyncValidateOrFn, type FieldValidateOrFn, type FormApi, type FormAsyncValidateOrFn, type FormOptions, type FormState, type FormValidateOrFn, type StandardSchemaV1, type VueFormApi } from "@tanstack/vue-form"
 import { type RuntimeFiber } from "effect/Fiber"
 import { getTransformationFrom, useIntl } from "../../utils"
@@ -492,7 +493,12 @@ export const createMeta = <T = any>(
           const newMeta = createMeta<T>({
             parent: key,
             property: p.type,
-            meta: { required: isRequired, nullableOrUndefined }
+            meta: {
+              // an empty string is valid for a S.String field, so we should not mark it as required
+              // TODO: handle this better via the createMeta minLength parsing
+              required: isRequired && (p.type._tag !== "StringKeyword" || getMetadataFromSchema(p.type).minLength),
+              nullableOrUndefined
+            }
           })
 
           acc[key as NestedKeyOf<T>] = newMeta as FieldMeta

From 7f1d92d2299c208a45c0850b5d90b2315dd72c6f Mon Sep 17 00:00:00 2001
From: Patrick Roza <contact@patrickroza.com>
Date: Tue, 30 Sep 2025 17:57:04 +0200
Subject: [PATCH 06/11] temp disable broken aMultiple field.

---
 .../stories/OmegaForm/ComplexForm.vue              | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/packages/vue-components/stories/OmegaForm/ComplexForm.vue b/packages/vue-components/stories/OmegaForm/ComplexForm.vue
index 5fc3ff72ed..7bcb9abe6c 100644
--- a/packages/vue-components/stories/OmegaForm/ComplexForm.vue
+++ b/packages/vue-components/stories/OmegaForm/ComplexForm.vue
@@ -45,7 +45,7 @@
         { title: 'c', value: 'c' }
       ]"
     />
-    <exampleForm.Input
+    <!-- <exampleForm.Input
       label="aMultiple"
       name="aMultiple"
       type="autocomplete"
@@ -53,7 +53,7 @@
         { title: 'a', value: 'a' },
         { title: 'b', value: 'b' }
       ]"
-    />
+    /> -->
     <button>Submit</button>
     <button
       type="reset"
@@ -73,6 +73,7 @@
 
 <script setup lang="ts">
 import { S } from "effect-app"
+import { watch } from "vue"
 import { useOmegaForm } from "../../src/components/OmegaForm"
 
 const exampleForm = useOmegaForm(
@@ -87,8 +88,9 @@ const exampleForm = useOmegaForm(
     aNumberMin2: S.Number.pipe(S.greaterThan(2)),
     aNumberMin2Max: S.Number.pipe(S.greaterThan(2)).pipe(S.lessThan(4)),
     aNumberMin2Max4Nullable: S.NullOr(S.Number.pipe(S.between(2, 4))),
-    aSelect: S.Union(S.Literal("a"), S.Literal("b"), S.Literal("c")),
-    aMultiple: S.Array(S.String)
+    aSelect: S.Union(S.Literal("a"), S.Literal("b"), S.Literal("c"))
+    // currently broken, also on main.
+    // aMultiple: S.Array(S.String)
   }),
   {
     onSubmit: async ({
@@ -117,4 +119,8 @@ const exampleForm = useOmegaForm(
   }
 )
 const isDirty = exampleForm.useStore((_) => _.isDirty)
+const values = exampleForm.useStore((_) => _.values)
+watch(values, (v) => {
+  console.log("values changed", v)
+})
 </script>

From e19f51836d8dbaa0956d858c935dd96ddaff75e4 Mon Sep 17 00:00:00 2001
From: Patrick Roza <contact@patrickroza.com>
Date: Tue, 30 Sep 2025 17:59:12 +0200
Subject: [PATCH 07/11] drop automatic null setting leading to isDirty, require
 explicit defaultValues for now, until we would provide a default value
 generator from Schema.

---
 .../src/components/OmegaForm/OmegaInternalInput.vue      | 9 ---------
 .../vue-components/stories/OmegaForm/ComplexForm.vue     | 4 ++++
 2 files changed, 4 insertions(+), 9 deletions(-)

diff --git a/packages/vue-components/src/components/OmegaForm/OmegaInternalInput.vue b/packages/vue-components/src/components/OmegaForm/OmegaInternalInput.vue
index 18e6c69495..38633567d8 100644
--- a/packages/vue-components/src/components/OmegaForm/OmegaInternalInput.vue
+++ b/packages/vue-components/src/components/OmegaForm/OmegaInternalInput.vue
@@ -82,15 +82,6 @@ const handleChange: OmegaFieldInternalApi<From, Name>["handleChange"] = (value)
   }
 }
 
-onMounted(() => {
-  if (
-    !fieldValue.value
-    && !props.meta?.required
-    && props.meta?.nullableOrUndefined === "null"
-  ) {
-    fieldApi.setValue(null as any)
-  }
-})
 const { mapError, removeError, showErrors, showErrorsOn } = (props.field.form as any).errorContext // todo; update types to include extended Omega Form props
 
 const realDirty = ref(false)
diff --git a/packages/vue-components/stories/OmegaForm/ComplexForm.vue b/packages/vue-components/stories/OmegaForm/ComplexForm.vue
index 7bcb9abe6c..a45d3673f9 100644
--- a/packages/vue-components/stories/OmegaForm/ComplexForm.vue
+++ b/packages/vue-components/stories/OmegaForm/ComplexForm.vue
@@ -93,6 +93,10 @@ const exampleForm = useOmegaForm(
     // aMultiple: S.Array(S.String)
   }),
   {
+    defaultValues: {
+      aString: "",
+      aNumberMin2Max4Nullable: null
+    },
     onSubmit: async ({
       value
     }: {

From 5719d5dd9b206148b76e1e024ec6182cb76c1fb6 Mon Sep 17 00:00:00 2001
From: Patrick Roza <contact@patrickroza.com>
Date: Tue, 30 Sep 2025 18:20:41 +0200
Subject: [PATCH 08/11] restore onMounted but set isDirty to false!

---
 .../src/components/OmegaForm/OmegaInternalInput.vue   | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/packages/vue-components/src/components/OmegaForm/OmegaInternalInput.vue b/packages/vue-components/src/components/OmegaForm/OmegaInternalInput.vue
index 38633567d8..6fa8713b99 100644
--- a/packages/vue-components/src/components/OmegaForm/OmegaInternalInput.vue
+++ b/packages/vue-components/src/components/OmegaForm/OmegaInternalInput.vue
@@ -82,6 +82,17 @@ const handleChange: OmegaFieldInternalApi<From, Name>["handleChange"] = (value)
   }
 }
 
+onMounted(() => {
+  if (
+    !fieldValue.value
+    && !props.meta?.required
+    && props.meta?.nullableOrUndefined === "null"
+  ) {
+    fieldApi.setValue(null as any)
+    fieldApi.setMeta((_) => ({ ..._, isDirty: false }))
+  }
+})
+
 const { mapError, removeError, showErrors, showErrorsOn } = (props.field.form as any).errorContext // todo; update types to include extended Omega Form props
 
 const realDirty = ref(false)

From 49182d4178cbecf50e11452d63dac1fcfa860941 Mon Sep 17 00:00:00 2001
From: Patrick Roza <contact@patrickroza.com>
Date: Tue, 30 Sep 2025 18:24:24 +0200
Subject: [PATCH 09/11] doc)

---
 packages/vue-components/stories/OmegaForm/Null.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/vue-components/stories/OmegaForm/Null.vue b/packages/vue-components/stories/OmegaForm/Null.vue
index 589a34a880..2164ac3feb 100644
--- a/packages/vue-components/stories/OmegaForm/Null.vue
+++ b/packages/vue-components/stories/OmegaForm/Null.vue
@@ -44,6 +44,8 @@ const exampleForm = useOmegaForm(
     aNumberMin2Max4Nullable: S.NullOr(S.Number.pipe(S.between(2, 4)))
   }),
   {
+    // we should really be setting default values to do all correctly
+    // TODO: we just generate it from the schema..
     defaultValues: {
       aString: "",
       aNumberMin2Max4Nullable: null

From df15dd1d8ddb8f8daa93a06fd23a8cd6d99a31d7 Mon Sep 17 00:00:00 2001
From: Patrick Roza <contact@patrickroza.com>
Date: Tue, 30 Sep 2025 18:27:50 +0200
Subject: [PATCH 10/11] doc

---
 .../src/components/OmegaForm/OmegaInternalInput.vue          | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/vue-components/src/components/OmegaForm/OmegaInternalInput.vue b/packages/vue-components/src/components/OmegaForm/OmegaInternalInput.vue
index 6fa8713b99..6547fde21b 100644
--- a/packages/vue-components/src/components/OmegaForm/OmegaInternalInput.vue
+++ b/packages/vue-components/src/components/OmegaForm/OmegaInternalInput.vue
@@ -82,14 +82,17 @@ const handleChange: OmegaFieldInternalApi<From, Name>["handleChange"] = (value)
   }
 }
 
+// TODO: it would be cleaner when default values are handled in the form initialization via Schema or by the one using the form component..
 onMounted(() => {
   if (
     !fieldValue.value
     && !props.meta?.required
     && props.meta?.nullableOrUndefined === "null"
   ) {
+    const isDirty = fieldState.value.meta.isDirty
     fieldApi.setValue(null as any)
-    fieldApi.setMeta((_) => ({ ..._, isDirty: false }))
+    // make sure we restore the previous dirty state..
+    fieldApi.setMeta((_) => ({ ..._, isDirty }))
   }
 })
 

From 65b373e9a30a4298f72b19298b41a7f222e4d473 Mon Sep 17 00:00:00 2001
From: Patrick Roza <contact@patrickroza.com>
Date: Tue, 30 Sep 2025 18:28:12 +0200
Subject: [PATCH 11/11] add changeset

---
 .changeset/giant-ears-chew.md | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 .changeset/giant-ears-chew.md

diff --git a/.changeset/giant-ears-chew.md b/.changeset/giant-ears-chew.md
new file mode 100644
index 0000000000..95c64977f2
--- /dev/null
+++ b/.changeset/giant-ears-chew.md
@@ -0,0 +1,6 @@
+---
+"@effect-app/vue-components": minor
+---
+
+fix: form is set to dirty when null field included in form.
+improve: String requirement handling