diff --git a/src/components/queryBuilder/JoinTable.vue b/src/components/queryBuilder/JoinTable.vue
index 130185c..8ea2153 100644
--- a/src/components/queryBuilder/JoinTable.vue
+++ b/src/components/queryBuilder/JoinTable.vue
@@ -12,7 +12,7 @@
             <ArrowsUpDownIcon class="text-gray-500 h-6 w-6 cursor-pointer" />
           </div>
 
-          <select v-if="value.type == 'defined'" v-model="context" class="w-full">
+          <select v-if="type == 'defined'" v-model="context" class="w-full">
             <option value="" disabled>Relation auswählen</option>
             <option
               v-for="relation in activeTable?.relations"
@@ -121,6 +121,17 @@ export default defineComponent({
         }
       },
     },
+    type: {
+      get(): string {
+        return this.modelValue.type ?? "defined";
+      },
+      set(val: "custom" | "defined") {
+        this.$emit("update:model-value", {
+          ...this.modelValue,
+          type: val,
+        });
+      },
+    },
     joinTable: {
       get(): string {
         return this.modelValue.table;
@@ -137,13 +148,17 @@ export default defineComponent({
     if (!this.value.id) {
       this.value.id = uuid();
     }
+    if (!this.value.type) {
+      console.log("setting type");
+      this.type = "defined";
+    }
   },
   methods: {
     swapJoinType(type: string) {
       if (type == "defined") {
-        this.value.type = "custom";
+        this.type = "custom";
       } else {
-        this.value.type = "defined";
+        this.type = "defined";
       }
     },
   },