diff --git a/apps/files/js/dist/sidebar.js b/apps/files/js/dist/sidebar.js
index dd052093cf5b92ffe29da75dee15c46b4a8f2bca..ab36d31cb7ad75bfa340184ea9c63b94bf12c0cc 100644
Binary files a/apps/files/js/dist/sidebar.js and b/apps/files/js/dist/sidebar.js differ
diff --git a/apps/files/js/dist/sidebar.js.map b/apps/files/js/dist/sidebar.js.map
index 5136e611fb57de5a6d0ca0cae26b657e032af255..1f5016f792a310b423a8e46081dffadc9c7ee8c6 100644
Binary files a/apps/files/js/dist/sidebar.js.map and b/apps/files/js/dist/sidebar.js.map differ
diff --git a/apps/files/src/services/Sidebar.js b/apps/files/src/services/Sidebar.js
index f2a1f8f21243b3fb6f07b503bcf643836e9fa343..42243b9de82da5a161d5eabf28dc54b776e8ffe9 100644
--- a/apps/files/src/services/Sidebar.js
+++ b/apps/files/src/services/Sidebar.js
@@ -75,25 +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
-	 *
-	 * @memberof Sidebar
-	 */
-	close() {
-		this.#state.file = ''
-	}
-
 	/**
 	 * Return current opened file
 	 *
diff --git a/apps/files/src/sidebar.js b/apps/files/src/sidebar.js
index 16e2035190f2bb10a432ac09c5e34a53be135a67..258f231365770ec862c4cdb9cf202d536255a4d2 100644
--- a/apps/files/src/sidebar.js
+++ b/apps/files/src/sidebar.js
@@ -51,10 +51,11 @@ 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
+	window.OCA.Files.Sidebar.close = AppSidebar.close
 })
diff --git a/apps/files/src/views/Sidebar.vue b/apps/files/src/views/Sidebar.vue
index 81c4e7283801394562cf6cfc4ea6e30d164b7985..5f07138ea80f9fae3f960e9406cef79d0e1e5d22 100644
--- a/apps/files/src/views/Sidebar.vue
+++ b/apps/files/src/views/Sidebar.vue
@@ -26,7 +26,7 @@
 		ref="sidebar"
 		v-bind="appSidebar"
 		:force-menu="true"
-		@close="onClose"
+		@close="close"
 		@update:active="setActiveTab"
 		@update:starred="toggleStarred"
 		@[defaultActionListener].stop.prevent="onDefaultAction">
@@ -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)
-				}
-			}
 		},
 	},
 
@@ -279,10 +250,6 @@ export default {
 		canDisplay(tab) {
 			return tab.isEnabled(this.fileInfo)
 		},
-		onClose() {
-			this.resetData()
-			OCA.Files.Sidebar.close()
-		},
 		resetData() {
 			this.error = null
 			this.fileInfo = null
@@ -405,7 +372,54 @@ export default {
 			if (OCA.SystemTags && OCA.SystemTags.View) {
 				OCA.SystemTags.View.toggle()
 			}
-		}
+		},
+
+		/**
+		 * Open the sidebar for the given file
+		 *
+		 * @param {string} path the file path to load
+		 * @returns {Promise}
+		 * @throws {Error} loading failure
+		 */
+		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)
+				}
+			}
+		},
+
+		/**
+		 * Close the sidebar
+		 */
+		close() {
+			this.Sidebar.file = ''
+			this.resetData()
+		},
 	},
 }
 </script>