diff --git a/frontend/src/components/form/Color.vue b/frontend/src/components/form/Color.vue
index c1e8b11..53f06d8 100644
--- a/frontend/src/components/form/Color.vue
+++ b/frontend/src/components/form/Color.vue
@@ -1,11 +1,18 @@
 <script setup lang="ts">
-defineProps<{
+import { computed } from 'vue';
+
+const props = defineProps<{
   label: string;
   modelValue: string;
 }>();
 const emit = defineEmits<{
   (event: 'update:modelValue', value: string): void;
 }>();
+
+const localValue = computed({
+  get: () => props.modelValue,
+  set: (value) => emit('update:modelValue', value),
+});
 </script>
 
 <template>
@@ -13,11 +20,10 @@ const emit = defineEmits<{
     <label class="block text-sm font-medium text-gray-700">{{ label }}</label>
     <div class="mt-1 relative rounded-md shadow-sm">
       <input
+        v-model="localValue"
         type="color"
         class="block w-full py-2 px-4 h-10 bg-white border border-gray-300 hover:border-2 hover:border-blue-500 hover:cursor-pointer focus:border-blue-500 rounded-md"
-        :value="modelValue"
         v-bind="$attrs"
-        @input="emit('update:modelValue', $event.target.value)"
       />
     </div>
   </div>
diff --git a/frontend/src/components/form/Input.vue b/frontend/src/components/form/Input.vue
index b3bc95a..5cef0ed 100644
--- a/frontend/src/components/form/Input.vue
+++ b/frontend/src/components/form/Input.vue
@@ -1,11 +1,18 @@
 <script setup lang="ts">
-defineProps<{
+import { computed } from 'vue';
+
+const props = defineProps<{
   label: string;
   modelValue: string;
 }>();
 const emit = defineEmits<{
   (event: 'update:modelValue', value: string): void;
 }>();
+
+const localValue = computed({
+  get: () => props.modelValue,
+  set: (value) => emit('update:modelValue', value),
+});
 </script>
 
 <template>
@@ -13,11 +20,10 @@ const emit = defineEmits<{
     <label class="block text-sm font-medium text-gray-700">{{ label }}</label>
     <div class="mt-1 relative rounded-md shadow-sm">
       <input
+        v-model="localValue"
         type="text"
         class="focus:ring-blue-500 focus:border-blue-500 block w-full border-gray-300 rounded-md"
-        :value="modelValue"
         v-bind="$attrs"
-        @input="emit('update:modelValue', $event.target.value)"
       />
     </div>
   </div>
diff --git a/frontend/src/components/form/TextArea.vue b/frontend/src/components/form/TextArea.vue
index 60a956e..cf9a77b 100644
--- a/frontend/src/components/form/TextArea.vue
+++ b/frontend/src/components/form/TextArea.vue
@@ -1,11 +1,18 @@
 <script setup lang="ts">
-defineProps<{
+import { computed } from 'vue';
+
+const props = defineProps<{
   label: string;
   modelValue: string;
 }>();
 const emit = defineEmits<{
   (event: 'update:modelValue', value: string): void;
 }>();
+
+const localValue = computed({
+  get: () => props.modelValue,
+  set: (value) => emit('update:modelValue', value),
+});
 </script>
 
 <template>
@@ -13,10 +20,9 @@ const emit = defineEmits<{
     <label class="block text-sm font-medium text-gray-700">{{ label }}</label>
     <div class="mt-1 relative rounded-md shadow-sm">
       <textarea
+        v-model="localValue"
         class="focus:ring-blue-500 focus:border-blue-500 block w-full border-gray-300 rounded-md"
-        :value="modelValue"
         v-bind="$attrs"
-        @input="emit('update:modelValue', $event.target.value)"
       />
     </div>
   </div>
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
index 6de6f41..5119b70 100644
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -11,7 +11,7 @@
     "esModuleInterop": true,
     "lib": ["esnext", "dom"],
     "paths": {
-      "@/*": ["src/*"]
+      "@/*": ["./src/*"]
     }
   },
   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]