diff --git a/src/services/SettingsAPI.ts b/src/services/SettingsAPI.ts
index 0d80d90a5a4..0fc1442efae 100644
--- a/src/services/SettingsAPI.ts
+++ b/src/services/SettingsAPI.ts
@@ -3,7 +3,8 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-import { readonly, shallowReactive } from 'vue'
+import { readonly, ref, markRaw } from 'vue'
+import type { Ref } from 'vue'
 
 import { emit } from '@nextcloud/event-bus'
 
@@ -22,14 +23,15 @@ type TalkSettingsSection = {
 	element: string
 }
 
-const customSettingsSections: TalkSettingsSection[] = shallowReactive([])
+// TODO: use shallowReactive instead of ref + markRaw in Vue 3 (see file commit history)
+const customSettingsSections: Ref<TalkSettingsSection[]> = ref([])
 
 /**
  * Register a custom settings section
  * @param section - Settings section
  */
 function registerSection(section: TalkSettingsSection) {
-	customSettingsSections.push(section)
+	customSettingsSections.value.push(markRaw(section))
 }
 
 /**
@@ -37,9 +39,9 @@ function registerSection(section: TalkSettingsSection) {
  * @param id - Section ID
  */
 function unregisterSection(id: string) {
-	const index = customSettingsSections.findIndex((section) => section.id === id)
+	const index = customSettingsSections.value.findIndex((section) => section.id === id)
 	if (index !== -1) {
-		customSettingsSections.splice(index, 1)
+		customSettingsSections.value.splice(index, 1)
 	}
 }
 
diff --git a/src/services/__tests__/SettingsAPI.spec.js b/src/services/__tests__/SettingsAPI.spec.js
index 57aa2b5ed1e..77ae78d2eaa 100644
--- a/src/services/__tests__/SettingsAPI.spec.js
+++ b/src/services/__tests__/SettingsAPI.spec.js
@@ -20,7 +20,7 @@ describe('SettingsAPI', () => {
 
 	it('should have registerSection method to register settings sections', () => {
 		const { customSettingsSections } = useCustomSettings()
-		expect(customSettingsSections).toEqual([])
+		expect(customSettingsSections.value).toEqual([])
 		expect(SettingsAPI.registerSection).toBeDefined()
 		SettingsAPI.registerSection({
 			id: 'test',
@@ -32,7 +32,7 @@ describe('SettingsAPI', () => {
 			name: 'Test 2',
 			element: 'test-element-two',
 		})
-		expect(customSettingsSections).toEqual([{
+		expect(customSettingsSections.value).toEqual([{
 			id: 'test',
 			name: 'Test',
 			element: 'test-element',
@@ -45,7 +45,7 @@ describe('SettingsAPI', () => {
 
 	it('should have unregisterSection method to unregister settings sections', () => {
 		const { customSettingsSections } = useCustomSettings()
-		expect(customSettingsSections).toEqual([{
+		expect(customSettingsSections.value).toEqual([{
 			id: 'test',
 			name: 'Test',
 			element: 'test-element',
@@ -56,7 +56,7 @@ describe('SettingsAPI', () => {
 		}])
 		expect(SettingsAPI.unregisterSection).toBeDefined()
 		SettingsAPI.unregisterSection('test')
-		expect(customSettingsSections).toEqual([{
+		expect(customSettingsSections.value).toEqual([{
 			id: 'test2',
 			name: 'Test 2',
 			element: 'test-element-two',