diff --git a/components/CircleMentions.vue b/components/CircleMentions.vue
index 81411462f..a7aa9bb34 100644
--- a/components/CircleMentions.vue
+++ b/components/CircleMentions.vue
@@ -1,3 +1,19 @@
+<script setup lang="ts">
+const { $translator: translator } = useNuxtApp();
+
+const { data: circleMentions } = useFetch<Record<string, Record<string, string>>>(
+    '/api/profile/my-circle-mentions',
+    { lazy: true },
+);
+
+const dialogue = useDialogue();
+const removeSelf = async (username: string) => {
+    await dialogue.confirm(translator.translate('profile.circles.removeSelf.confirm', { username }), 'warning');
+    await dialogue.postWithAlertOnError(`/api/profile/remove-self-circle/${encodeURIComponent(username)}`);
+    window.location.reload();
+};
+</script>
+
 <template>
     <Loading :value="circleMentions">
         <p class="small text-muted">
@@ -41,26 +57,3 @@
         </table>
     </Loading>
 </template>
-
-<script>
-import { useFetch } from 'nuxt/app';
-
-import useDialogue from '../composables/useDialogue.ts';
-
-export default {
-    setup() {
-        const { data: circleMentions } = useFetch('/api/profile/my-circle-mentions', { lazy: true });
-        return {
-            circleMentions,
-            dialogue: useDialogue(),
-        };
-    },
-    methods: {
-        async removeSelf(username) {
-            await this.dialogue.confirm(this.$t('profile.circles.removeSelf.confirm', { username }), 'warning');
-            await this.dialogue.postWithAlertOnError(`/api/profile/remove-self-circle/${encodeURIComponent(username)}`);
-            window.location.reload();
-        },
-    },
-};
-</script>