diff --git a/src/FilesSidebarCallViewApp.vue b/src/FilesSidebarCallViewApp.vue
index a41e98ff59..6a9187f227 100644
--- a/src/FilesSidebarCallViewApp.vue
+++ b/src/FilesSidebarCallViewApp.vue
@@ -15,6 +15,7 @@
 </template>
 
 <script>
+import { defineAsyncComponent, defineComponent, h } from 'vue'
 import LoadingComponent from './components/LoadingComponent.vue'
 import { useGetToken } from './composables/useGetToken.ts'
 import { useHashCheck } from './composables/useHashCheck.js'
@@ -23,18 +24,15 @@ import { useSessionIssueHandler } from './composables/useSessionIssueHandler.ts'
 import { useTokenStore } from './stores/token.ts'
 
 export default {
-
 	name: 'FilesSidebarCallViewApp',
 
 	components: {
-		CallView: () => ({
-			component: import(/* webpackChunkName: "files-sidebar-call-chunk" */'./components/CallView/CallView.vue'),
-			loading: {
-				render: (h) => h(LoadingComponent, { class: 'call-loading' }),
-			},
+		CallView: defineAsyncComponent({
+			loader: () => import(/* webpackChunkName: "files-sidebar-call-chunk" */'./components/CallView/CallView.vue'),
+			loadingComponent: defineComponent(() => h(LoadingComponent, { class: 'call-loading' })),
 		}),
 
-		TopBar: () => import(/* webpackChunkName: "files-sidebar-call-chunk" */'./components/TopBar/TopBar.vue'),
+		TopBar: defineAsyncComponent(() => import(/* webpackChunkName: "files-sidebar-call-chunk" */'./components/TopBar/TopBar.vue')),
 	},
 
 	setup() {
@@ -147,7 +145,7 @@ export default {
 		window.addEventListener('beforeunload', this.preventUnload)
 	},
 
-	beforeDestroy() {
+	beforeUnmount() {
 		window.removeEventListener('beforeunload', this.preventUnload)
 	},
 
diff --git a/src/FilesSidebarTabApp.vue b/src/FilesSidebarTabApp.vue
index a94d8d2995..2e52c467c8 100644
--- a/src/FilesSidebarTabApp.vue
+++ b/src/FilesSidebarTabApp.vue
@@ -27,11 +27,11 @@
 </template>
 
 <script>
-
 import { getCurrentUser } from '@nextcloud/auth'
 import Axios from '@nextcloud/axios'
 import { loadState } from '@nextcloud/initial-state'
 import { t } from '@nextcloud/l10n'
+import { defineAsyncComponent, defineComponent, h } from 'vue'
 import NcButton from '@nextcloud/vue/components/NcButton'
 import LoadingComponent from './components/LoadingComponent.vue'
 import { useGetToken } from './composables/useGetToken.ts'
@@ -52,11 +52,9 @@ export default {
 	name: 'FilesSidebarTabApp',
 
 	components: {
-		FilesSidebarChatView: () => ({
-			component: import(/* webpackChunkName: "files-sidebar-tab-chunk" */'./views/FilesSidebarChatView.vue'),
-			loading: {
-				render: (h) => h(LoadingComponent, { class: 'tab-loading' }),
-			},
+		FilesSidebarChatView: defineAsyncComponent({
+			loader: () => import(/* webpackChunkName: "files-sidebar-tab-chunk" */'./views/FilesSidebarChatView.vue'),
+			loadingComponent: defineComponent(() => h(LoadingComponent, { class: 'tab-loading' })),
 		}),
 
 		NcButton,
diff --git a/src/views/FilesSidebarCallView.js b/src/views/FilesSidebarCallView.js
index a61857c98f..361bca05d3 100644
--- a/src/views/FilesSidebarCallView.js
+++ b/src/views/FilesSidebarCallView.js
@@ -16,12 +16,12 @@
  */
 export default class FilesSidebarCallView {
 	constructor() {
-		this.callViewInstance = OCA.Talk.newCallView()
+		const callViewApp = OCA.Talk.newCallView()
 
-		this.$el = document.createElement('div')
-		this.id = 'FilesSidebarCallView'
+		const container = document.createElement('div')
+		container.id = 'FilesSidebarCallView'
 
-		this.callViewInstance.mount(this.$el)
+		this.callViewInstance = callViewApp.mount(container)
 		this.$el = this.callViewInstance.$el
 
 		this.$el.replaceAll = function(target) {
@@ -32,6 +32,6 @@ export default class FilesSidebarCallView {
 	setFileInfo(fileInfo) {
 		// The FilesSidebarCallViewApp is the first (and only) child of the Vue
 		// instance.
-		this.callViewInstance.$children[0].setFileInfo(fileInfo)
+		this.callViewInstance.setFileInfo(fileInfo)
 	}
 }