diff --git a/pages/[type]/[id]/settings/tags.vue b/pages/[type]/[id]/settings/tags.vue
index aef2ab00f9..985316daf2 100644
--- a/pages/[type]/[id]/settings/tags.vue
+++ b/pages/[type]/[id]/settings/tags.vue
@@ -8,10 +8,10 @@
       </div>
       <p>
         Accurate tagging is important to help people find your
-        {{ $formatProjectType(project.project_type).toLowerCase() }}. Make sure to select all tags
-        that apply.
+        {{ $formatProjectType(props.project.project_type).toLowerCase() }}. Make sure to select all
+        tags that apply.
       </p>
-      <p v-if="project.versions.length === 0" class="known-errors">
+      <p v-if="props.project.versions.length === 0" class="known-errors">
         Please upload a version first in order to select tags!
       </p>
       <template v-else>
@@ -23,21 +23,21 @@
             <span class="label__description">
               <template v-if="header === 'categories'">
                 Select all categories that reflect the themes or function of your
-                {{ $formatProjectType(project.project_type).toLowerCase() }}.
+                {{ $formatProjectType(props.project.project_type).toLowerCase() }}.
               </template>
               <template v-else-if="header === 'features'">
                 Select all of the features that your
-                {{ $formatProjectType(project.project_type).toLowerCase() }} makes use of.
+                {{ $formatProjectType(props.project.project_type).toLowerCase() }} makes use of.
               </template>
               <template v-else-if="header === 'resolutions'">
                 Select the resolution(s) of textures in your
-                {{ $formatProjectType(project.project_type).toLowerCase() }}.
+                {{ $formatProjectType(props.project.project_type).toLowerCase() }}.
               </template>
               <template v-else-if="header === 'performance impact'">
                 Select the realistic performance impact of your
-                {{ $formatProjectType(project.project_type).toLowerCase() }}. Select multiple if the
-                {{ $formatProjectType(project.project_type).toLowerCase() }} is configurable to
-                different levels of performance impact.
+                {{ $formatProjectType(props.project.project_type).toLowerCase() }}. Select multiple
+                if the {{ $formatProjectType(props.project.project_type).toLowerCase() }} is
+                configurable to different levels of performance impact.
               </template>
             </span>
           </div>
@@ -112,141 +112,142 @@
   </div>
 </template>
 
-<script>
-import Checkbox from '~/components/ui/Checkbox.vue'
-import StarIcon from '~/assets/images/utils/star.svg'
-import SaveIcon from '~/assets/images/utils/save.svg'
+<script setup>
+import { Checkbox, StarIcon, SaveIcon } from 'omorphia'
 
-export default defineNuxtComponent({
-  components: {
-    Checkbox,
-    SaveIcon,
-    StarIcon,
-  },
-  props: {
-    project: {
-      type: Object,
-      default() {
-        return {}
-      },
-    },
-    allMembers: {
-      type: Array,
-      default() {
-        return []
-      },
-    },
-    currentMember: {
-      type: Object,
-      default() {
-        return null
-      },
+const data = useNuxtApp()
+
+const props = defineProps({
+  project: {
+    type: Object,
+    default() {
+      return {}
     },
-    patchProject: {
-      type: Function,
-      default() {
-        return () => {
-          this.$notify({
-            group: 'main',
-            title: 'An error occurred',
-            text: 'Patch project function not found',
-            type: 'error',
-          })
-        }
-      },
+  },
+  allMembers: {
+    type: Array,
+    default() {
+      return []
     },
   },
-  data() {
-    return {
-      selectedTags: this.$sortedCategories().filter(
-        (x) =>
-          x.project_type === this.project.actualProjectType &&
-          (this.project.categories.includes(x.name) ||
-            this.project.additional_categories.includes(x.name))
-      ),
-      featuredTags: this.$sortedCategories().filter(
-        (x) =>
-          x.project_type === this.project.actualProjectType &&
-          this.project.categories.includes(x.name)
-      ),
-    }
+  currentMember: {
+    type: Object,
+    default() {
+      return null
+    },
   },
-  computed: {
-    categoryLists() {
-      const lists = {}
-      this.$sortedCategories().forEach((x) => {
-        if (x.project_type === this.project.actualProjectType) {
-          const header = x.header
-          if (!lists[header]) {
-            lists[header] = []
-          }
-          lists[header].push(x)
-        }
-      })
-      return lists
+  patchProject: {
+    type: Function,
+    default() {
+      return () => {
+        addNotification({
+          group: 'main',
+          title: 'An error occurred',
+          text: 'Patch project function not found',
+          type: 'error',
+        })
+      }
     },
-    patchData() {
-      const data = {}
-      // Promote selected categories to featured if there are less than 3 featured
-      const newFeaturedTags = this.featuredTags.slice()
-      if (newFeaturedTags.length < 1 && this.selectedTags.length > newFeaturedTags.length) {
-        const nonFeaturedCategories = this.selectedTags.filter((x) => !newFeaturedTags.includes(x))
+  },
+})
 
-        nonFeaturedCategories
-          .slice(0, Math.min(nonFeaturedCategories.length, 3 - newFeaturedTags.length))
-          .forEach((x) => newFeaturedTags.push(x))
-      }
-      // Convert selected and featured categories to backend-usable arrays
-      const categories = newFeaturedTags.map((x) => x.name)
-      const additionalCategories = this.selectedTags
-        .filter((x) => !newFeaturedTags.includes(x))
-        .map((x) => x.name)
+const selectedTags = ref(
+  data
+    .$sortedCategories()
+    .filter(
+      (x) =>
+        x.project_type === props.project.actualProjectType &&
+        (props.project.categories.includes(x.name) ||
+          props.project.additional_categories.includes(x.name))
+    )
+)
 
-      if (
-        categories.length !== this.project.categories.length ||
-        categories.some((value) => !this.project.categories.includes(value))
-      ) {
-        data.categories = categories
-      }
+const featuredTags = ref(
+  data
+    .$sortedCategories()
+    .filter(
+      (x) =>
+        x.project_type === props.project.actualProjectType &&
+        props.project.categories.includes(x.name)
+    )
+)
 
-      if (
-        additionalCategories.length !== this.project.additional_categories.length ||
-        additionalCategories.some((value) => !this.project.additional_categories.includes(value))
-      ) {
-        data.additional_categories = additionalCategories
+const categoryLists = computed(() => {
+  const lists = {}
+  data.$sortedCategories().forEach((x) => {
+    if (x.project_type === props.project.actualProjectType) {
+      const header = x.header
+      if (!lists[header]) {
+        lists[header] = []
       }
+      lists[header].push(x)
+    }
+  })
+  return lists
+})
 
-      return data
-    },
-    hasChanges() {
-      return Object.keys(this.patchData).length > 0
-    },
-  },
-  methods: {
-    toggleCategory(category) {
-      if (this.selectedTags.includes(category)) {
-        this.selectedTags = this.selectedTags.filter((x) => x !== category)
-        if (this.featuredTags.includes(category)) {
-          this.featuredTags = this.featuredTags.filter((x) => x !== category)
-        }
-      } else {
-        this.selectedTags.push(category)
-      }
-    },
-    toggleFeaturedCategory(category) {
-      if (this.featuredTags.includes(category)) {
-        this.featuredTags = this.featuredTags.filter((x) => x !== category)
-      } else {
-        this.featuredTags.push(category)
-      }
-    },
-    saveChanges() {
-      if (this.hasChanges) {
-        this.patchProject(this.patchData)
-      }
-    },
-  },
+const patchData = computed(() => {
+  const data = {}
+  // Promote selected categories to featured if there are less than 3 featured
+  const newFeaturedTags = featuredTags.value.slice()
+  if (newFeaturedTags.length < 1 && selectedTags.value.length > newFeaturedTags.length) {
+    const nonFeaturedCategories = selectedTags.value.filter((x) => !newFeaturedTags.includes(x))
+
+    nonFeaturedCategories
+      .slice(0, Math.min(nonFeaturedCategories.length, 3 - newFeaturedTags.length))
+      .forEach((x) => newFeaturedTags.push(x))
+  }
+  // Convert selected and featured categories to backend-usable arrays
+  const categories = newFeaturedTags.map((x) => x.name)
+  const additionalCategories = selectedTags.value
+    .filter((x) => !newFeaturedTags.includes(x))
+    .map((x) => x.name)
+
+  if (
+    categories.length !== props.project.categories.length ||
+    categories.some((value) => !props.project.categories.includes(value))
+  ) {
+    data.categories = categories
+  }
+
+  if (
+    additionalCategories.length !== props.project.additional_categories.length ||
+    additionalCategories.some((value) => !props.project.additional_categories.includes(value))
+  ) {
+    data.additional_categories = additionalCategories
+  }
+
+  return data
 })
+
+const hasChanges = computed(() => {
+  return Object.keys(patchData.value).length > 0
+})
+
+function toggleCategory(category) {
+  if (selectedTags.value.includes(category)) {
+    selectedTags.value = selectedTags.value.filter((x) => x !== category)
+    if (featuredTags.value.includes(category)) {
+      featuredTags.value = featuredTags.value.filter((x) => x !== category)
+    }
+  } else {
+    selectedTags.value.push(category)
+  }
+}
+
+function toggleFeaturedCategory(category) {
+  if (featuredTags.value.includes(category)) {
+    featuredTags.value = featuredTags.value.filter((x) => x !== category)
+  } else {
+    featuredTags.value.push(category)
+  }
+}
+
+function saveChanges() {
+  if (hasChanges.value) {
+    props.patchProject(patchData.value)
+  }
+}
 </script>
 <style lang="scss" scoped>
 .label__title {