diff --git a/apps/settings/src/components/PersonalInfo/PronounsSection.vue b/apps/settings/src/components/PersonalInfo/PronounsSection.vue
index fb35b1800c5..e345cb8e225 100644
--- a/apps/settings/src/components/PersonalInfo/PronounsSection.vue
+++ b/apps/settings/src/components/PersonalInfo/PronounsSection.vue
@@ -8,16 +8,18 @@
 		:placeholder="randomPronounsPlaceholder" />
 </template>
 
-<script>
-import { loadState } from '@nextcloud/initial-state'
+<script lang="ts">
+import type { IAccountProperty } from '../../constants/AccountPropertyConstants.ts'
 
+import { loadState } from '@nextcloud/initial-state'
+import { t } from '@nextcloud/l10n'
+import { defineComponent } from 'vue'
 import AccountPropertySection from './shared/AccountPropertySection.vue'
+import { NAME_READABLE_ENUM } from '../../constants/AccountPropertyConstants.ts'
 
-import { NAME_READABLE_ENUM } from '../../constants/AccountPropertyConstants.js'
-
-const { pronouns } = loadState('settings', 'personalInfoParameters', {})
+const { pronouns } = loadState<{ pronouns: IAccountProperty }>('settings', 'personalInfoParameters')
 
-export default {
+export default defineComponent({
 	name: 'PronounsSection',
 
 	components: {
@@ -33,13 +35,13 @@ export default {
 	computed: {
 		randomPronounsPlaceholder() {
 			const pronouns = [
-				this.t('settings', 'she/her'),
-				this.t('settings', 'he/him'),
-				this.t('settings', 'they/them'),
+				t('settings', 'she/her'),
+				t('settings', 'he/him'),
+				t('settings', 'they/them'),
 			]
 			const pronounsExample = pronouns[Math.floor(Math.random() * pronouns.length)]
-			return this.t('settings', `Your pronouns. E.g. ${pronounsExample}`, { pronounsExample })
+			return t('settings', 'Your pronouns. E.g. {pronounsExample}', { pronounsExample })
 		},
 	},
-}
+})
 </script>