Fixed categories not updating

components/calendar/category/Table.vue

@@ -6,9 +6,7 @@ const { categories } = defineProps<{
   categories: Category[]
 }>()
 
-const sortedCategories = computed(() => {
+const sortedCategories = computed(() => categories.toSorted((a, b) => a.name.localeCompare(b.name)))
-  return categories.toSorted((a, b) => a.name.localeCompare(b.name))
-})
 </script>
 
 <template>

pages/my/calendars/[id].vue

@@ -41,12 +41,11 @@ const {
 const isLoading = computed(() => calendarStatus.value === "pending" || categoriesStatus.value === "pending")
 
 const { setActiveCalendar } = useCalendar()
-watch(isLoading, (n) => {
+watch([calendar, categories], () => {
-  if (!n && calendar.value?.data && categories.value?.data) {
+  if (calendar.value?.data && categories.value?.data) {
     setActiveCalendar(calendar.value?.data, categories.value.data)
   }
-}, { immediate: true }
+}, { immediate: true })
-)
 </script>
 
 <template>

stores/CalendarStore.ts

@@ -918,11 +918,10 @@ export const useCalendar = defineStore("calendar", () => {
    */
   function updateAllEventsCategories(categories: Category[]) {
     baseEvents.value.forEach((event) => {
-      if (event.category?.id) {
+      const category = categories.find((c) => c.id === event.category?.id)
-        const category = categories.find((c) => c.id === event.category?.id)
+
-        if (category) {
+      if (category && event.category?.id) {
-          event.category = category
+        event.category = category
-        }
       }
     })
   }