diff --git a/src/files/FilesCollectiveHeader.js b/src/files/FilesCollectiveHeader.js
deleted file mode 100644
index 97b846eb9..000000000
--- a/src/files/FilesCollectiveHeader.js
+++ /dev/null
@@ -1,40 +0,0 @@
-/**
- * SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors
- * SPDX-License-Identifier: AGPL-3.0-or-later
- */
-
-import { loadState } from '@nextcloud/initial-state'
-import { createApp, reactive } from 'vue'
-import FileListInfo from '../views/FileListInfo.vue'
-
-const props = reactive({
-	collectivesFolder: null,
-	path: null,
-})
-
-/**
- * @type {import('@nextcloud/files').IFileListHeader}
- */
-const FilesCollectiveHeader = {
-	id: 'collective',
-	order: 9,
-
-	enabled(folder, view) {
-		return view.id === 'files' || view.id === 'files.public'
-	},
-
-	render(el, folder) {
-		el.id = 'files-collective-wrapper'
-		props.collectivesFolder = loadState('collectives', 'user_folder', null)
-		props.path = folder.path
-		createApp(FileListInfo, props).mount(el)
-	},
-
-	updated(folder) {
-		props.path = folder.path
-	},
-}
-
-export {
-	FilesCollectiveHeader,
-}
diff --git a/src/files/FilesCollectiveHeader.ts b/src/files/FilesCollectiveHeader.ts
new file mode 100644
index 000000000..7abfceefa
--- /dev/null
+++ b/src/files/FilesCollectiveHeader.ts
@@ -0,0 +1,33 @@
+/**
+ * SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import type { IFileListHeader, IFolder, IView } from '@nextcloud/files'
+import type { App, ComponentPublicInstance } from 'vue'
+
+import { createApp } from 'vue'
+import FileListInfo from '../views/FileListInfo.vue'
+
+let app: App | undefined
+let instance: ComponentPublicInstance<typeof FileListInfo> | undefined
+
+export const FilesCollectiveHeader: IFileListHeader = {
+	id: 'collective',
+	order: 9,
+
+	enabled(folder: IFolder, view: IView) {
+		return view.id === 'files' || view.id === 'files.public'
+	},
+
+	render(el: HTMLElement, folder: IFolder) {
+		el.id = 'files-collective-wrapper'
+		app?.unmount()
+		app = createApp(FileListInfo, { path: folder.path })
+		instance = app.mount(el) as ComponentPublicInstance<typeof FileListInfo>
+	},
+
+	updated(folder: IFolder) {
+		instance!.setPath(folder.path)
+	},
+}
diff --git a/src/init.js b/src/init.js
index 20be510de..282117554 100644
--- a/src/init.js
+++ b/src/init.js
@@ -5,7 +5,7 @@
 
 import { registerFileListHeader } from '@nextcloud/files'
 import { registerFileListHeaders as legacyRegisterFileListHeader } from '@nextcloud/files-legacy'
-import { FilesCollectiveHeader } from './files/FilesCollectiveHeader.js'
+import { FilesCollectiveHeader } from './files/FilesCollectiveHeader.ts'
 
 const version = Number.parseInt((window.OC?.config?.version ?? '0').split('.')[0])
 
diff --git a/src/views/FileListInfo.vue b/src/views/FileListInfo.vue
index 898c7d13b..170f9cebd 100644
--- a/src/views/FileListInfo.vue
+++ b/src/views/FileListInfo.vue
@@ -25,11 +25,14 @@
 </template>
 
 <script>
+import { loadState } from '@nextcloud/initial-state'
 import { t } from '@nextcloud/l10n'
 import { generateUrl } from '@nextcloud/router'
 import NcButton from '@nextcloud/vue/components/NcButton'
 import InformationIcon from 'vue-material-design-icons/InformationOutline.vue'
 
+const collectivesFolder = loadState('collectives', 'user_folder', null)
+
 export default {
 	name: 'FileListInfo',
 
@@ -39,27 +42,25 @@ export default {
 	},
 
 	props: {
-		collectivesFolder: {
-			type: String,
-			required: true,
-		},
-
 		path: {
 			type: String,
 			required: true,
 		},
 	},
 
+	expose: ['setPath'],
+
 	data() {
 		return {
 			active: false,
+			internalPath: this.path,
 		}
 	},
 
 	computed: {
 		collectivesLink() {
-			const collectivesPath = this.path.startsWith(this.collectivesFolder)
-				? this.path.slice(this.collectivesFolder.length)
+			const collectivesPath = this.internalPath.startsWith(collectivesFolder)
+				? this.internalPath.slice(collectivesFolder.length)
 				: ''
 			return generateUrl('/apps/collectives' + collectivesPath)
 		},
@@ -67,6 +68,7 @@ export default {
 
 	watch: {
 		path: function() {
+			this.internalPath = this.path
 			this.setActive()
 		},
 	},
@@ -79,7 +81,15 @@ export default {
 		t,
 
 		setActive() {
-			this.active = this.collectivesFolder && this.collectivesFolder !== '/' && this.path.startsWith(this.collectivesFolder)
+			this.active = collectivesFolder && collectivesFolder !== '/' && this.internalPath.startsWith(collectivesFolder)
+		},
+
+		/**
+		 * @param {string} path - The new path
+		 */
+		setPath(path) {
+			this.internalPath = path
+			this.setActive()
 		},
 	},
 }