diff --git a/src/view/Office.vue b/src/view/Office.vue
index 449463ac1e..68f4a1b364 100644
--- a/src/view/Office.vue
+++ b/src/view/Office.vue
@@ -364,7 +364,7 @@ export default {
 				FilesAppIntegration.updateFileInfo(undefined, Date.now())
 			}
 			disableScrollLock()
-			this.$parent.close()
+			this.$emit('close')
 		},
 		reload() {
 			this.loading = LOADING_STATE.LOADING
diff --git a/src/view/Viewer.vue b/src/view/Viewer.vue
new file mode 100644
index 0000000000..2bb2a6b3a6
--- /dev/null
+++ b/src/view/Viewer.vue
@@ -0,0 +1,64 @@
+<!--
+  - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+<!--
+  - This component is a wrapper around the Office component to be used in the viewer
+  - We currently need this to isolate the vue instances
+-->
+<template>
+	<Office :filename="filename"
+		:fileid="fileid"
+		:has-preview="hasPreview"
+		:source="source"
+		:mime="mime"
+		:permissions="permissions"
+		:is-embedded="isEmbedded"
+		@close="$parent.close()"
+		@update:loaded="$emit('update:loaded', $event)" />
+</template>
+<script>
+import Vue from 'vue'
+import Office from './Office.vue'
+
+Vue.prototype.t = t
+Vue.prototype.n = n
+
+export default {
+	name: 'Viewer',
+	components: {
+		Office: Vue.extend(Office),
+	},
+	props: {
+		filename: {
+			type: String,
+			default: null,
+		},
+		fileid: {
+			type: Number,
+			default: null,
+		},
+		hasPreview: {
+			type: Boolean,
+			required: false,
+			default: () => false,
+		},
+		source: {
+			type: String,
+			default: null,
+		},
+		mime: {
+			type: String,
+			default: null,
+		},
+		permissions: {
+			type: String,
+			default: '',
+		},
+		isEmbedded: {
+			type: Boolean,
+			default: false,
+		},
+	},
+}
+</script>
diff --git a/src/viewer.js b/src/viewer.js
index 9f04ca17ea..5976cb5568 100644
--- a/src/viewer.js
+++ b/src/viewer.js
@@ -6,10 +6,9 @@
 import './init-shared.js'
 import '../css/filetypes.scss'
 
-import Vue from 'vue'
-import Office from './view/Office.vue'
 import { getCapabilities } from './services/capabilities.ts'
 import { autoSetupBuiltInCodeServerIfNeeded } from './services/builtInCode.ts'
+import Viewer from './view/Viewer.vue'
 
 const supportedMimes = getCapabilities().mimetypes
 
@@ -18,7 +17,7 @@ if (OCA.Viewer) {
 		id: 'richdocuments',
 		group: null,
 		mimes: supportedMimes,
-		component: Vue.extend(Office),
+		component: Viewer,
 		theme: 'default',
 		canCompare: true,
 	})