diff --git a/app/src/views/private/components/export-sidebar-detail.vue b/app/src/views/private/components/export-sidebar-detail.vue
index 20420d3ed4..0feaa1a647 100644
--- a/app/src/views/private/components/export-sidebar-detail.vue
+++ b/app/src/views/private/components/export-sidebar-detail.vue
@@ -215,7 +215,7 @@ import { getRootPath } from '@/utils/get-root-path';
 import { notify } from '@/utils/notify';
 import readableMimeType from '@/utils/readable-mime-type';
 import { Filter } from '@directus/shared/types';
-import { computed, reactive, ref, watch } from 'vue';
+import { computed, reactive, ref, toRefs, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useCollection } from '@directus/shared/composables';
 import FolderPicker from '@/views/private/components/folder-picker/folder-picker.vue';
@@ -246,6 +246,8 @@ const emit = defineEmits(['refresh']);
 
 const { t, n } = useI18n();
 
+const { collection } = toRefs(props);
+
 const fileInput = ref<HTMLInputElement | null>(null);
 
 const file = ref<File | null>(null);
@@ -258,7 +260,7 @@ const fileExtension = computed(() => {
 	return readableMimeType(file.value.type, true);
 });
 
-const { primaryKeyField, fields, info: collectionInfo } = useCollection(props.collection);
+const { primaryKeyField, fields, info: collectionInfo } = useCollection(collection);
 
 const exportSettings = reactive({
 	limit: props.layoutQuery?.limit ?? 25,
@@ -294,7 +296,7 @@ const getItemCount = debounce(async () => {
 
 	try {
 		const count = await api
-			.get(getEndpoint(props.collection), {
+			.get(getEndpoint(collection.value), {
 				params: {
 					...exportSettings,
 					aggregate: {
@@ -382,7 +384,7 @@ function useUpload() {
 		formData.append('file', file);
 
 		try {
-			await api.post(`/utils/import/${props.collection}`, formData, {
+			await api.post(`/utils/import/${collection.value}`, formData, {
 				onUploadProgress: (progressEvent: ProgressEvent) => {
 					const percentCompleted = Math.floor((progressEvent.loaded * 100) / progressEvent.total);
 					progress.value = percentCompleted;
@@ -419,9 +421,9 @@ function startExport() {
 }
 
 function exportDataLocal() {
-	const endpoint = props.collection.startsWith('directus_')
-		? `${props.collection.substring(9)}`
-		: `items/${props.collection}`;
+	const endpoint = collection.value.startsWith('directus_')
+		? `${collection.value.substring(9)}`
+		: `items/${collection.value}`;
 
 	const url = getRootPath() + endpoint;
 
@@ -449,7 +451,7 @@ async function exportDataFiles() {
 	exporting.value = true;
 
 	try {
-		await api.post(`/utils/export/${props.collection}`, {
+		await api.post(`/utils/export/${collection.value}`, {
 			query: {
 				...exportSettings,
 				sort: [exportSettings.sort],