diff --git a/app/src/composables/use-field-tree/use-field-tree.ts b/app/src/composables/use-field-tree/use-field-tree.ts
index 11d7d4be00..e076929856 100644
--- a/app/src/composables/use-field-tree/use-field-tree.ts
+++ b/app/src/composables/use-field-tree/use-field-tree.ts
@@ -3,7 +3,7 @@ import { Relation } from '@/types';
 import { Field } from '@directus/shared/types';
 import { getRelationType } from '@/utils/get-relation-type';
 import { cloneDeep, orderBy } from 'lodash';
-import { computed, Ref, ComputedRef } from 'vue';
+import { Ref, ref, watch } from 'vue';
 
 type FieldOption = { name: string; field: string; key: string; children?: FieldOption[]; group?: string };
 
@@ -14,15 +14,24 @@ export default function useFieldTree(
 	inject?: Ref<{ fields: Field[]; relations: Relation[] } | null>,
 	filter: (field: Field) => boolean = () => true,
 	depth = 3
-): { tree: ComputedRef<FieldOption[]> } {
+): { tree: Ref<FieldOption[]> } {
 	const fieldsStore = useFieldsStore();
 	const collectionsStore = useCollectionsStore();
 	const relationsStore = useRelationsStore();
 
-	const tree = computed(() => {
-		if (!collection.value) return [];
-		return parseLevel(collection.value, null);
-	});
+	const tree = ref<FieldOption[]>([]);
+
+	watch(
+		collection,
+		(newCollection) => {
+			if (!newCollection) {
+				tree.value = [];
+				return;
+			}
+			tree.value = parseLevel(newCollection, null);
+		},
+		{ immediate: true }
+	);
 
 	return { tree };