feat: migrate to vue 3 (#2689)

---------

Co-authored-by: Joep <jcbuhre@gmail.com>
Co-authored-by: Omar Hussein <omarmohammad1951@gmail.com>
Co-authored-by: Oleg Lobanov <oleg@lobanov.me>

frontend/src/components/settings/Themes.vue

@@ -1,18 +1,27 @@
 <template>
   <select v-on:change="change" :value="theme">
-    <option value="">{{ $t("settings.themes.light") }}</option>
-    <option value="dark">{{ $t("settings.themes.dark") }}</option>
+    <option value="">{{ t("settings.themes.default") }}</option>
+    <option value="light">{{ t("settings.themes.light") }}</option>
+    <option value="dark">{{ t("settings.themes.dark") }}</option>
   </select>
 </template>
 
-<script>
-export default {
-  name: "themes",
-  props: ["theme"],
-  methods: {
-    change(event) {
-      this.$emit("update:theme", event.target.value);
-    },
-  },
+<script setup lang="ts">
+import { SelectHTMLAttributes } from "vue";
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
+
+defineProps<{
+  theme: UserTheme;
+}>();
+
+const emit = defineEmits<{
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  (e: "update:theme", val: string | null): void;
+}>();
+
+const change = (event: Event) => {
+  emit("update:theme", (event.target as SelectHTMLAttributes)?.value);
 };
 </script>