diff --git a/components/Example.vue b/components/Example.vue
index 56eb4d577..2331892fa 100644
--- a/components/Example.vue
+++ b/components/Example.vue
@@ -1,3 +1,46 @@
+<script setup lang="ts">
+import type { Example, Pronoun, ExamplePart } from '~/src/classes.ts';
+
+const props = withDefaults(defineProps<{
+    example: Example;
+    pronoun: Pronoun;
+    counter?: number;
+    link?: boolean;
+    pronunciation?: boolean;
+}>(), {
+    counter: 0,
+});
+
+const startsWithArabicLetter = /^[\u0621-\u064A]/;
+const endsWithArabicLetter = /[\u0621-\u064A]$/;
+const zeroWidthJoiner = '\u200d';
+
+const exampleParts = computed((): ExamplePart[] => {
+    return props.example.parts(props.pronoun, props.counter);
+});
+
+const getContent = (index: number): string | null => {
+    if (exampleParts.value[index].variable) {
+        return props.pronoun.getMorpheme(exampleParts.value[index].str, props.counter);
+    }
+    return exampleParts.value[index].str;
+};
+const getPrepend = (index: number): string => {
+    if (getContent(index)?.match(startsWithArabicLetter) &&
+        index > 0 && getContent(index - 1)?.match(endsWithArabicLetter)) {
+        return zeroWidthJoiner;
+    }
+    return '';
+};
+const getAppend = (index: number): string => {
+    if (getContent(index)?.match(endsWithArabicLetter) &&
+        index < exampleParts.value.length - 1 && getContent(index + 1)?.match(startsWithArabicLetter)) {
+        return zeroWidthJoiner;
+    }
+    return '';
+};
+</script>
+
 <template>
     <template v-for="(part, index) in exampleParts" :key="index">
         <strong v-if="part.variable"><Morpheme
@@ -17,51 +60,3 @@
         :pronunciation="example.toPronunciationString(pronoun) as string"
     />
 </template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-
-import { Example, Pronoun } from '../src/classes.ts';
-import type { ExamplePart } from '../src/classes.ts';
-
-const startsWithArabicLetter = /^[\u0621-\u064A]/;
-const endsWithArabicLetter = /[\u0621-\u064A]$/;
-const zeroWidthJoiner = '\u200d';
-
-export default defineComponent({
-    props: {
-        example: { required: true, type: Example },
-        pronoun: { required: true, type: Pronoun },
-        counter: { default: 0, type: Number },
-        link: { type: Boolean },
-        pronunciation: { type: Boolean },
-    },
-    computed: {
-        exampleParts(): ExamplePart[] {
-            return this.example.parts(this.pronoun, this.counter);
-        },
-    },
-    methods: {
-        getContent(index: number): string | null {
-            if (this.exampleParts[index].variable) {
-                return this.pronoun.getMorpheme(this.exampleParts[index].str, this.counter);
-            }
-            return this.exampleParts[index].str;
-        },
-        getPrepend(index: number): string {
-            if (this.getContent(index)?.match(startsWithArabicLetter) &&
-                index > 0 && this.getContent(index - 1)?.match(endsWithArabicLetter)) {
-                return zeroWidthJoiner;
-            }
-            return '';
-        },
-        getAppend(index: number): string {
-            if (this.getContent(index)?.match(endsWithArabicLetter) &&
-                index < this.exampleParts.length - 1 && this.getContent(index + 1)?.match(startsWithArabicLetter)) {
-                return zeroWidthJoiner;
-            }
-            return '';
-        },
-    },
-});
-</script>