fix: ensure nextTick is used for state change handling in OmegaTagged…

.changeset/stale-showers-wave.md

@@ -0,0 +1,5 @@
+---
+"@effect-app/vue-components": patch
+---
+
+fix: ensure nextTick is used for state change handling in OmegaTaggedUnionInternal

packages/vue-components/src/components/OmegaForm/OmegaTaggedUnionInternal.vue

@@ -12,7 +12,7 @@
   generic="From extends Record<PropertyKey, any>, To extends Record<PropertyKey, any>, Name extends DeepKeys<From>"
 >
 import { type DeepKeys, type DeepValue } from "@tanstack/vue-form"
-import { watch } from "vue"
+import { nextTick, watch } from "vue"
 import { type OmegaFieldInternalApi } from "./InputProps"
 import { type useOmegaForm } from "./useOmegaForm"
 
@@ -23,27 +23,27 @@ const props = defineProps<{
   form: ReturnType<typeof useOmegaForm<From, To>>
 }>()
 
-const values = props.form.useStore(({ values }) => values)
-
 // Watch for _tag changes
 watch(() => props.state, (newTag, oldTag) => {
   if (newTag === null) {
     props.field.setValue(null as DeepValue<From, Name>)
   }
 
   if (newTag !== oldTag && newTag) {
-    // Get default values for the new tag to ensure correct types
-    const tagDefaults = (props.form as any).unionDefaultValues?.[newTag as string] ?? {}
-    // Merge: keep _tag from current values, but use tag defaults for other fields
-    const resetValues = {
-      ...tagDefaults,
-      _tag: newTag
-    }
-    props.form.reset(resetValues as any)
-    setTimeout(() => {
-      props.field.validate("change")
-    }, 0)
+    // Use nextTick to avoid cleanup conflicts during reactive updates
+    nextTick(() => {
+      // Get default values for the new tag to ensure correct types
+      const tagDefaults = (props.form as any).unionDefaultValues?.[newTag as string] ?? {}
+      // Merge: keep _tag from current values, but use tag defaults for other fields
+      const resetValues = {
+        ...tagDefaults,
+        _tag: newTag
+      }
+      props.form.reset(resetValues as any)
+      setTimeout(() => {
+        props.field.validate("change")
+      }, 0)
+    })
   }
-  return undefined
 }, { immediate: true })
 </script>