diff --git a/resources/js/Components/MismatchRow.vue b/resources/js/Components/MismatchRow.vue
index 8dd94813..b5b3cfcf 100644
--- a/resources/js/Components/MismatchRow.vue
+++ b/resources/js/Components/MismatchRow.vue
@@ -12,12 +12,12 @@
               {{mismatch.type}}
             </span>
             <span v-else>
-              {{ this.$i18n('statement') }}
+              {{ $i18n('statement') }}
             </span>
         </td>
         <td :data-header="$i18n('column-wikidata-value')">
             <span class="empty-value" v-if="mismatch.wikidata_value === ''">
-              {{ this.$i18n('empty-value') }}
+              {{ $i18n('empty-value') }}
             </span> 
             <a
               v-else class="break-line-link" :href="statementUrl" target="_blank">
@@ -99,22 +99,20 @@
             </a>
             <span class="upload-date">{{uploadDate}}</span>
             <div class="description">
-              {{this.mismatch.import_meta.description}}
+              {{mismatch.import_meta.description}}
             </div>
           </cdx-dialog>
         </td>
     </tr>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { formatISO } from 'date-fns';
-
-import type { PropType } from 'vue';
-import { defineComponent } from 'vue';
+import { computed, ref } from 'vue';
 import { CdxButton, CdxDialog, CdxSelect } from "@wikimedia/codex";
 import { MenuItem } from '@wmde/wikit-vue-components/dist/components/MenuItem';
-
 import { LabelledMismatch, ReviewDecision } from "../types/Mismatch";
+import { useI18n } from 'vue-banana-i18n';
 
 const truncateLength = 100;
 
@@ -126,72 +124,54 @@ type ReviewOptionMap = {
   [key: string]: ReviewMenuItem;
 };
 
-interface MismatchRowState {
-  statusOptions: ReviewOptionMap;
-  decision: ReviewMenuItem;
-  reviewStatus: string;
-  fullDescriptionDialog: boolean;
-}
+const props = withDefaults(defineProps<{
+  mismatch: LabelledMismatch
+  disabled: boolean
+}>(), {
+  disabled: false
+});
 
-export default defineComponent({
-    components: {
-    CdxButton,
-    CdxDialog,
-    CdxSelect
-    },
-    props: {
-        mismatch: Object as PropType<LabelledMismatch>,
-        disabled: {
-            type: Boolean,
-            default: false
-        }
+const messages = useI18n();
+
+const statusOptions: ReviewOptionMap = Object.values(ReviewDecision).reduce(
+  (options: ReviewOptionMap, decision: ReviewDecision) => ({
+    ...options,
+    [decision]: {
+      value: decision,
+      label: messages.i18n(`review-status-${decision}`),
+      description: "",
     },
-    computed: {
-      uploadDate(): string {
-        return formatISO(new Date(this.mismatch.import_meta.created_at), {
-            representation: 'date'
-        });
-      },
-      statementUrl(): string {
-        return `https://www.wikidata.org/wiki/${this.mismatch.item_id}#${this.mismatch.statement_guid}`;
-      },
-      shouldTruncate(): boolean {
-        const text = this.mismatch.import_meta.description;
-        return text ? text.length > truncateLength : false;
-      },
-      uploadInfoDescription(): string {
-        const text = this.mismatch.import_meta.description;
-        return this.shouldTruncate ?
-          text.substring(0, truncateLength) + '...' : text;
-      }
-  },
-  data(): MismatchRowState {
-    // The following reducer generates the list of dropdown options based on a list of allowed status values
-    const statusOptions: ReviewOptionMap = Object.values(ReviewDecision).reduce(
-      (options: ReviewOptionMap, decision: ReviewDecision) => ({
-        ...options,
-        [decision]: {
-          value: decision,
-          label: this.$i18n(`review-status-${decision}`),
-          description: "",
-        },
-      }),
-      {}
-    );
-    return {
-      statusOptions,
-      decision: statusOptions[this.mismatch.review_status],
-      reviewStatus: String(this.mismatch.review_status),
-      fullDescriptionDialog: false
-    };
-  },
-  methods: {
-    showDialog(e: Event) {
-      e.preventDefault();
-      this.fullDescriptionDialog = true;
-    }
-  }
+  }),
+  {}
+);
+
+const uploadDate = computed<string>(() => {
+	return formatISO(new Date(props.mismatch.import_meta.created_at), {
+    representation: 'date'
+  });
 });
+
+const statementUrl = computed<string>(() => {
+	return `https://www.wikidata.org/wiki/${props.mismatch.item_id}#${props.mismatch.statement_guid}`;
+});
+
+const shouldTruncate = computed<boolean>(() => {
+	const text = props.mismatch.import_meta.description;
+  return text ? text.length > truncateLength : false;
+});
+
+const uploadInfoDescription = computed<string>(() => {
+	const text = props.mismatch.import_meta.description;
+  return shouldTruncate.value ? text.substring(0, truncateLength) + '...' : text;
+});
+
+const reviewStatus = ref(String(props.mismatch.review_status));
+const fullDescriptionDialog = ref(false);
+
+function showDialog(e: Event) {
+  e.preventDefault();
+  fullDescriptionDialog.value = true;
+}
 </script>
 
 <style lang="scss">
diff --git a/resources/js/Components/MismatchesTable.vue b/resources/js/Components/MismatchesTable.vue
index 72eb2c58..b661617c 100644
--- a/resources/js/Components/MismatchesTable.vue
+++ b/resources/js/Components/MismatchesTable.vue
@@ -22,27 +22,18 @@
     </wikit-table>
 </template>
 
-<script lang="ts">
-import type { PropType } from 'vue';
-import { defineComponent } from 'vue';
+<script setup lang="ts">
 import { Table as WikitTable } from '@wmde/wikit-vue-components';
 
 import MismatchRow from './MismatchRow.vue';
 
-import { LabelledMismatch } from '../types/Mismatch';
+import type { LabelledMismatch } from '../types/Mismatch';
 
-export default defineComponent({
-    components: {
-        MismatchRow,
-        WikitTable,
-    },
-    props: {
-        mismatches: Array as PropType<LabelledMismatch[]>,
-        disabled: {
-            type: Boolean,
-            default: false
-        }
-    }
+withDefaults(defineProps<{
+	mismatches: LabelledMismatch[],
+    disabled: boolean
+}>(), {
+	disabled: false
 });
 </script>
 
diff --git a/tests/Vue/Components/MismatchRow.spec.js b/tests/Vue/Components/MismatchRow.spec.js
index 3a60d91d..03f7db3a 100644
--- a/tests/Vue/Components/MismatchRow.spec.js
+++ b/tests/Vue/Components/MismatchRow.spec.js
@@ -5,6 +5,13 @@ import {CdxSelect} from "@wikimedia/codex";
 import {ReviewDecision} from '@/types/Mismatch.ts';
 
 import MismatchRow from '@/Components/MismatchRow.vue';
+import { createI18n } from 'vue-banana-i18n';
+
+const i18n = createI18n({
+    messages: {},
+    locale: 'en',
+    wikilinks: true
+});
 
 describe('MismatchesRow.vue', () => {
     it('accepts a disabled property', () => {
@@ -25,10 +32,7 @@ describe('MismatchesRow.vue', () => {
         const wrapper = mount(MismatchRow, {
             props: {mismatch, disabled},
             global: {
-                mocks: {
-                    // Mock the banana-i18n plugin dependency
-                    $i18n: key => key
-                }
+                plugins: [i18n],
             }
         });
 
@@ -57,10 +61,7 @@ describe('MismatchesRow.vue', () => {
         const wrapper = mount(MismatchRow, {
             props: {mismatch},
             global: {
-                mocks: {
-                    // Mock the banana-i18n plugin dependency
-                    $i18n: key => key
-                }
+                plugins: [i18n],
             }
         });
         const rowText = wrapper.find('tr').text();
@@ -97,10 +98,7 @@ describe('MismatchesRow.vue', () => {
         const wrapper = mount(MismatchRow, {
             props: {mismatch},
             global: {
-                mocks: {
-                    // Mock the banana-i18n plugin dependency
-                    $i18n: key => key
-                }
+                plugins: [i18n],
             }
         });
 
@@ -129,10 +127,7 @@ describe('MismatchesRow.vue', () => {
         const wrapper = mount(MismatchRow, {
             props: {mismatch},
             global: {
-                mocks: {
-                    // Mock the banana-i18n plugin dependency
-                    $i18n: key => key
-                }
+                plugins: [i18n],
             }
         });
 
@@ -161,10 +156,7 @@ describe('MismatchesRow.vue', () => {
         const wrapper = mount(MismatchRow, {
             props: {mismatch},
             global: {
-                mocks: {
-                    // Mock the banana-i18n plugin dependency
-                    $i18n: key => key
-                }
+                plugins: [i18n],
             }
         });
 
@@ -198,10 +190,7 @@ describe('MismatchesRow.vue', () => {
         const wrapper = mount(MismatchRow, {
             props: {mismatch},
             global: {
-                mocks: {
-                    // Mock the banana-i18n plugin dependency
-                    $i18n: key => key
-                }
+                plugins: [i18n],
             }
         });
 
@@ -241,10 +230,7 @@ describe('MismatchesRow.vue', () => {
         const wrapper = mount(MismatchRow, {
             props: {mismatch},
             global: {
-                mocks: {
-                    // Mock the banana-i18n plugin dependency
-                    $i18n: key => key
-                }
+                plugins: [i18n],
             }
         });
 
@@ -279,10 +265,7 @@ describe('MismatchesRow.vue', () => {
         const wrapper = mount(MismatchRow, {
             props: {mismatch},
             global: {
-                mocks: {
-                    // Mock the banana-i18n plugin dependency
-                    $i18n: key => key
-                },
+                plugins: [i18n],
                 stubs: {
                     teleport: true,
                     transition: true
@@ -312,10 +295,7 @@ describe('MismatchesRow.vue', () => {
         const wrapper = mount(MismatchRow, {
             props: {mismatch},
             global: {
-                mocks: {
-                    // Mock the banana-i18n plugin dependency
-                    $i18n: key => key
-                }
+                plugins: [i18n],
             }
         });
 
@@ -339,10 +319,7 @@ describe('MismatchesRow.vue', () => {
         const wrapper = mount(MismatchRow, {
             props: {mismatch},
             global: {
-                mocks: {
-                    // Mock the banana-i18n plugin dependency
-                    $i18n: key => key
-                }
+                plugins: [i18n],
             }
         });
 
@@ -371,10 +348,7 @@ describe('MismatchesRow.vue', () => {
         const wrapper = mount(MismatchRow, {
             props: {mismatch},
             global: {
-                mocks: {
-                    // Mock the banana-i18n plugin dependency
-                    $i18n: key => `${key}`
-                }
+                plugins: [i18n],
             }
         });
 
@@ -404,9 +378,8 @@ describe('MismatchesRow.vue', () => {
         const wrapper = mount(MismatchRow, {
             props: {mismatch},
             global: {
+                plugins: [i18n],
                 mocks: {
-                    // Mock the banana-i18n plugin dependency
-                    $i18n: key => `${key}`,
                     $bubble: bubbleStub
                 }
             }
diff --git a/tests/Vue/Components/MismatchesTable.spec.js b/tests/Vue/Components/MismatchesTable.spec.js
index 2993e7a5..ef2749cf 100644
--- a/tests/Vue/Components/MismatchesTable.spec.js
+++ b/tests/Vue/Components/MismatchesTable.spec.js
@@ -1,6 +1,13 @@
 import { mount } from '@vue/test-utils';
 import MismatchesTable from '@/Components/MismatchesTable.vue';
 import MismatchRow from '@/Components/MismatchRow.vue';
+import { createI18n } from 'vue-banana-i18n';
+
+const i18n = createI18n({
+    messages: {},
+    locale: 'en',
+    wikilinks: true
+});
 
 describe('MismatchesTable.vue', () => {
     it('accepts a mismatches property', () => {
@@ -22,10 +29,7 @@ describe('MismatchesTable.vue', () => {
         const wrapper = mount(MismatchesTable, {
             props: { mismatches },
             global: {
-                mocks: {
-                    // Mock the banana-i18n plugin dependency
-                    $i18n: key => key
-                }
+                plugins: [i18n]
             }
         });
 
@@ -59,10 +63,7 @@ describe('MismatchesTable.vue', () => {
         const wrapper = mount(MismatchesTable, {
             props: { disabled, mismatches },
             global: {
-                mocks: {
-                    // Mock the banana-i18n plugin dependency
-                    $i18n: key => key
-                }
+                plugins: [i18n]
             }
         });