fix: multiple regressions on data management page (#5758)

frontend/components/Domain/Recipe/RecipeDataTable.vue

@@ -3,12 +3,13 @@
     v-model="selected"
     item-key="id"
     show-select
-    :sort-by="[{ key: 'dateAdded', order: 'desc' }]"
+    :sort-by="sortBy"
     :headers="headers"
     :items="recipes"
     :items-per-page="15"
     class="elevation-0"
     :loading="loading"
+    return-object
   >
     <template #[`item.name`]="{ item }">
       <a
@@ -117,7 +118,7 @@ export default defineNuxtComponent({
       },
     },
   },
-  emits: ["click"],
+  emits: ["click", "update:modelValue"],
   setup(props, context) {
     const i18n = useI18n();
     const $auth = useMealieAuth();
@@ -128,6 +129,9 @@ export default defineNuxtComponent({
       set: value => context.emit(INPUT_EVENT, value),
     });
 
+    // Initialize sort state with default sorting by dateAdded descending
+    const sortBy = ref([{ key: "dateAdded", order: "desc" }]);
+
     const headers = computed(() => {
       const hdrs: Array<{ title: string; value: string; align?: string; sortable?: boolean }> = [];
 
@@ -206,6 +210,7 @@ export default defineNuxtComponent({
 
     return {
       selected,
+      sortBy,
       groupSlug,
       headers,
       formatDate,