diff --git a/app/src/modules/settings/routes/data-model/field-detail/components/interface.vue b/app/src/modules/settings/routes/data-model/field-detail/components/interface.vue
index c1da0d9529..2af73fbab3 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/components/interface.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/components/interface.vue
@@ -24,7 +24,9 @@
 
 			<component
 				v-model="fieldData.meta.options"
+				:collection="collection"
 				:field-data="fieldData"
+				:relations="relations"
 				:is="`interface-options-${selectedInterface.id}`"
 				v-else
 			/>
@@ -33,7 +35,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, computed, watch } from '@vue/composition-api';
+import { defineComponent, computed, watch, toRefs } from '@vue/composition-api';
 import { getInterfaces } from '@/interfaces';
 import { FancySelectItem } from '@/components/v-fancy-select/types';
 
@@ -45,6 +47,10 @@ export default defineComponent({
 			type: String,
 			required: true,
 		},
+		collection: {
+			type: String,
+			required: true,
+		},
 	},
 	setup(props) {
 		const interfaces = getInterfaces();
@@ -109,7 +115,9 @@ export default defineComponent({
 			return interfaces.value.find((inter) => inter.id === state.fieldData.meta.interface);
 		});
 
-		return { fieldData: state.fieldData, selectItems, selectedInterface };
+		const { fieldData, relations } = toRefs(state);
+
+		return { fieldData, relations, selectItems, selectedInterface };
 	},
 });
 </script>