From 4e26f82a3a7106a4654401fddc550431cb423e11 Mon Sep 17 00:00:00 2001
From: Davide Di Pumpo <davidemak@gmail.com>
Date: Wed, 3 Dec 2025 19:02:57 +0100
Subject: [PATCH] fix: Add key to component for reactivity and include
 translation in schema generation

---
 .changeset/twenty-dolls-bathe.md              |  5 +++++
 .../src/components/OmegaForm/OmegaInput.vue   | 19 ++++++++++++++++++-
 2 files changed, 23 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/twenty-dolls-bathe.md

diff --git a/.changeset/twenty-dolls-bathe.md b/.changeset/twenty-dolls-bathe.md
new file mode 100644
index 000000000..245021f23
--- /dev/null
+++ b/.changeset/twenty-dolls-bathe.md
@@ -0,0 +1,5 @@
+---
+"@effect-app/vue-components": patch
+---
+
+fix: Add key to component for reactivity and include translation in schema generation
diff --git a/packages/vue-components/src/components/OmegaForm/OmegaInput.vue b/packages/vue-components/src/components/OmegaForm/OmegaInput.vue
index d37f204c0..a78f0bec6 100644
--- a/packages/vue-components/src/components/OmegaForm/OmegaInput.vue
+++ b/packages/vue-components/src/components/OmegaForm/OmegaInput.vue
@@ -1,6 +1,7 @@
 <template>
   <component
     :is="form.Field"
+    :key="fieldKey"
     :name="name"
     :validators="{
       onChange: schema,
@@ -41,6 +42,7 @@
 >
 import { type DeepKeys } from "@tanstack/vue-form"
 import { computed, inject, type Ref, useAttrs } from "vue"
+import { useIntl } from "../../utils"
 import { type FieldMeta, generateInputStandardSchemaFromFieldMeta, type OmegaInputPropsBase } from "./OmegaFormStuff"
 import OmegaInternalInput from "./OmegaInternalInput.vue"
 import { useErrorLabel } from "./useOmegaForm"
@@ -80,12 +82,27 @@ const meta = computed(() => {
   return props.form.meta[propsName.value]
 })
 
+// Key to force Field re-mount when meta type changes (for TaggedUnion support)
+const fieldKey = computed(() => {
+  const m = meta.value
+  if (!m) return propsName.value
+  // Include type and key constraints in the key so Field re-mounts when validation rules change
+  // Cast to any since not all FieldMeta variants have these properties
+  const fm = m as any
+  return `${propsName.value}-${fm.type}-${fm.minLength ?? ""}-${fm.maxLength ?? ""}-${fm.minimum ?? ""}-${
+    fm.maximum ?? ""
+  }`
+})
+
+// Call useIntl during setup to avoid issues when computed re-evaluates
+const { trans } = useIntl()
+
 const schema = computed(() => {
   if (!meta.value) {
     console.log(props.name, Object.keys(props.form.meta), props.form.meta)
     throw new Error("Meta is undefined")
   }
-  return generateInputStandardSchemaFromFieldMeta(meta.value)
+  return generateInputStandardSchemaFromFieldMeta(meta.value, trans)
 })
 
 const errori18n = useErrorLabel(props.form)