diff --git a/app/src/layouts/tabular/index.ts b/app/src/layouts/tabular/index.ts
index cf3aa988be..79bf9678ee 100644
--- a/app/src/layouts/tabular/index.ts
+++ b/app/src/layouts/tabular/index.ts
@@ -142,7 +142,10 @@ export default defineLayout<LayoutOptions, LayoutQuery>({
 		function useItemOptions() {
 			const page = syncRefProperty(layoutQuery, 'page', 1);
 			const limit = syncRefProperty(layoutQuery, 'limit', 25);
-			const sort = syncRefProperty(layoutQuery, 'sort', primaryKeyField.value ? [primaryKeyField.value?.field] : []);
+			const sort = syncRefProperty(layoutQuery, 'sort', () =>
+				primaryKeyField.value ? [primaryKeyField.value?.field] : []
+			);
+
 			const fields = syncRefProperty(
 				layoutQuery,
 				'fields',
diff --git a/app/src/utils/sync-ref-property.ts b/app/src/utils/sync-ref-property.ts
index 40b547461a..5534258984 100644
--- a/app/src/utils/sync-ref-property.ts
+++ b/app/src/utils/sync-ref-property.ts
@@ -1,8 +1,17 @@
+import { isFunction } from 'lodash';
 import { computed, Ref } from 'vue';
 
-export function syncRefProperty<R, T extends keyof R>(ref: Ref<R>, key: T, defaultValue: R[T]) {
+export function syncRefProperty<R, T extends keyof R>(ref: Ref<R>, key: T, defaultValue: R[T] | (() => R[T])) {
 	return computed<R[T]>({
-		get: () => ref.value?.[key] ?? defaultValue,
+		get: () => {
+			if (ref.value?.[key]) {
+				return ref.value[key];
+			}
+
+			if (isFunction(defaultValue)) return defaultValue();
+
+			return defaultValue;
+		},
 		set: (value: R[T]) => {
 			ref.value = Object.assign({}, ref.value, { [key]: value }) as R;
 		},