diff --git a/apps/files/src/services/Sidebar.js b/apps/files/src/services/Sidebar.js
index f2a1f8f212..917302df61 100644
--- a/apps/files/src/services/Sidebar.js
+++ b/apps/files/src/services/Sidebar.js
@@ -75,16 +75,6 @@ export default class Sidebar {
 		return false
 	}
 
-	/**
-	 * Open the sidebar for the given file
-	 *
-	 * @memberof Sidebar
-	 * @param {string} path the file path to load
-	 */
-	open(path) {
-		this.#state.file = path
-	}
-
 	/**
 	 * Close the sidebar
 	 *
diff --git a/apps/files/src/sidebar.js b/apps/files/src/sidebar.js
index 16e2035190..f0f6fef6b9 100644
--- a/apps/files/src/sidebar.js
+++ b/apps/files/src/sidebar.js
@@ -51,10 +51,10 @@ window.addEventListener('DOMContentLoaded', () => {
 	}
 
 	// Init vue app
-	const AppSidebar = new Vue({
-		// eslint-disable-next-line vue/match-component-file-name
+	const View = Vue.extend(SidebarView)
+	const AppSidebar = new View({
 		name: 'SidebarRoot',
-		render: h => h(SidebarView),
 	})
 	AppSidebar.$mount('#app-sidebar')
+	window.OCA.Files.Sidebar.open = AppSidebar.open
 })
diff --git a/apps/files/src/views/Sidebar.vue b/apps/files/src/views/Sidebar.vue
index 81c4e72838..4bc5607597 100644
--- a/apps/files/src/views/Sidebar.vue
+++ b/apps/files/src/views/Sidebar.vue
@@ -237,35 +237,6 @@ export default {
 
 		isSystemTagsEnabled() {
 			return OCA && 'SystemTags' in OCA
-		}
-	},
-
-	watch: {
-		// update the sidebar data
-		async file(curr, prev) {
-			this.resetData()
-			if (curr && curr.trim() !== '') {
-				try {
-					this.fileInfo = await FileInfo(this.davPath)
-					// adding this as fallback because other apps expect it
-					this.fileInfo.dir = this.file.split('/').slice(0, -1).join('/')
-
-					// DEPRECATED legacy views
-					// TODO: remove
-					this.views.forEach(view => {
-						view.setFileInfo(this.fileInfo)
-					})
-
-					this.$nextTick(() => {
-						if (this.$refs.sidebar) {
-							this.$refs.sidebar.updateTabs()
-						}
-					})
-				} catch (error) {
-					this.error = t('files', 'Error while loading the file data')
-					console.error('Error while loading the file data', error)
-				}
-			}
 		},
 	},
 
@@ -405,7 +376,45 @@ export default {
 			if (OCA.SystemTags && OCA.SystemTags.View) {
 				OCA.SystemTags.View.toggle()
 			}
-		}
+		},
+
+		/**
+		 * Open the sidebar for the given file
+		 *
+		 * @memberof Sidebar
+		 * @param {string} path the file path to load
+		 */
+		async open(path) {
+			// update current opened file
+			this.Sidebar.file = path
+
+			// reset previous data
+			this.resetData()
+			if (path && path.trim() !== '') {
+				try {
+					this.fileInfo = await FileInfo(this.davPath)
+					// adding this as fallback because other apps expect it
+					this.fileInfo.dir = this.file.split('/').slice(0, -1).join('/')
+
+					// DEPRECATED legacy views
+					// TODO: remove
+					this.views.forEach(view => {
+						view.setFileInfo(this.fileInfo)
+					})
+
+					this.$nextTick(() => {
+						if (this.$refs.sidebar) {
+							this.$refs.sidebar.updateTabs()
+						}
+					})
+				} catch (error) {
+					this.error = t('files', 'Error while loading the file data')
+					console.error('Error while loading the file data', error)
+
+					throw new Error(error)
+				}
+			}
+		},
 	},
 }
 </script>