From 181b9048f09edd52f6546d6b201a3eafd45c0bc8 Mon Sep 17 00:00:00 2001
From: KimHyeongRae0 <hrb0120@gmail.com>
Date: Mon, 20 Apr 2026 22:48:10 +0900
Subject: [PATCH 1/2] fix(vue-query): allow computed ref as queryKey property
 in queryOptions

Closes #10525
---
 ...ix-vue-query-options-query-key-reactive.md | 12 ++++++++++
 .../src/__tests__/queryOptions.test-d.ts      | 23 +++++++++++++++++++
 packages/vue-query/src/queryOptions.ts        | 23 ++++++++++++-------
 3 files changed, 50 insertions(+), 8 deletions(-)
 create mode 100644 .changeset/fix-vue-query-options-query-key-reactive.md

diff --git a/.changeset/fix-vue-query-options-query-key-reactive.md b/.changeset/fix-vue-query-options-query-key-reactive.md
new file mode 100644
index 00000000000..63c24bad544
--- /dev/null
+++ b/.changeset/fix-vue-query-options-query-key-reactive.md
@@ -0,0 +1,12 @@
+---
+'@tanstack/vue-query': patch
+---
+
+fix(vue-query): allow computed ref and other reactive values as `queryKey` property in `queryOptions`
+
+This fixes a regression introduced in #10452 where `queryOptions` only accepted plain arrays for the `queryKey` property, but not `computed` refs, `Ref` values, or other reactive values. The related fix in #10465 only covered the `enabled` property.
+
+Now the `queryKey` property in `queryOptions` correctly accepts:
+- Plain `QueryKey` arrays
+- `Ref<QueryKey>`
+- `ComputedRef<QueryKey>`
diff --git a/packages/vue-query/src/__tests__/queryOptions.test-d.ts b/packages/vue-query/src/__tests__/queryOptions.test-d.ts
index 0b87e1dd204..a0fe82bc8ac 100644
--- a/packages/vue-query/src/__tests__/queryOptions.test-d.ts
+++ b/packages/vue-query/src/__tests__/queryOptions.test-d.ts
@@ -298,4 +298,27 @@ describe('queryOptions', () => {
 
     expectTypeOf(options.queryKey).not.toBeUndefined()
   })
+
+  it('should allow computed ref as queryKey', () => {
+    const id = ref<string | null>('1')
+
+    // This was broken in #10452, the #10465 fix only covered `enabled`
+    const options = queryOptions({
+      queryKey: computed(() => ['foo', id.value] as const),
+      queryFn: () => Promise.resolve({ id: '1' }),
+    })
+
+    expectTypeOf(options.queryKey).not.toBeUndefined()
+  })
+
+  it('should allow ref as queryKey', () => {
+    const keyRef = ref(['foo', '1'] as const)
+
+    const options = queryOptions({
+      queryKey: keyRef,
+      queryFn: () => Promise.resolve({ id: '1' }),
+    })
+
+    expectTypeOf(options.queryKey).not.toBeUndefined()
+  })
 })
diff --git a/packages/vue-query/src/queryOptions.ts b/packages/vue-query/src/queryOptions.ts
index ee8bc8c2e5b..881797203d4 100644
--- a/packages/vue-query/src/queryOptions.ts
+++ b/packages/vue-query/src/queryOptions.ts
@@ -1,4 +1,9 @@
-import type { DeepUnwrapRef, MaybeRefOrGetter, ShallowOption } from './types'
+import type {
+  DeepUnwrapRef,
+  MaybeRef,
+  MaybeRefOrGetter,
+  ShallowOption,
+} from './types'
 import type {
   DataTag,
   DefaultError,
@@ -31,13 +36,15 @@ export type QueryOptions<
             TQueryData,
             DeepUnwrapRef<TQueryKey>
           >)
-    : QueryObserverOptions<
-        TQueryFnData,
-        TError,
-        TData,
-        TQueryData,
-        DeepUnwrapRef<TQueryKey>
-      >[Property]
+    : Property extends 'queryKey'
+      ? MaybeRef<TQueryKey>
+      : QueryObserverOptions<
+          TQueryFnData,
+          TError,
+          TData,
+          TQueryData,
+          DeepUnwrapRef<TQueryKey>
+        >[Property]
 } & ShallowOption
 
 export type UndefinedInitialQueryOptions<

From d23cf31a7bd3ff08c9f2239b4b8c652e79826c27 Mon Sep 17 00:00:00 2001
From: KimHyeongRae0 <hrb0120@gmail.com>
Date: Thu, 23 Apr 2026 12:19:34 +0900
Subject: [PATCH 2/2] fix(vue-query): widen queryKey to MaybeRefOrGetter to
 match enabled

toValueDeep already calls `() => T` at runtime, so the queryKey type
should accept the same reactive forms as enabled: Ref, ComputedRef,
and getters. Adds a getter test and updates the changeset.
---
 .../fix-vue-query-options-query-key-reactive.md       |  7 ++++---
 .../vue-query/src/__tests__/queryOptions.test-d.ts    | 11 +++++++++++
 packages/vue-query/src/queryOptions.ts                |  9 ++-------
 3 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/.changeset/fix-vue-query-options-query-key-reactive.md b/.changeset/fix-vue-query-options-query-key-reactive.md
index 63c24bad544..744a0d8b49e 100644
--- a/.changeset/fix-vue-query-options-query-key-reactive.md
+++ b/.changeset/fix-vue-query-options-query-key-reactive.md
@@ -2,11 +2,12 @@
 '@tanstack/vue-query': patch
 ---
 
-fix(vue-query): allow computed ref and other reactive values as `queryKey` property in `queryOptions`
+fix(vue-query): allow reactive and getter values as `queryKey` property in `queryOptions`
 
-This fixes a regression introduced in #10452 where `queryOptions` only accepted plain arrays for the `queryKey` property, but not `computed` refs, `Ref` values, or other reactive values. The related fix in #10465 only covered the `enabled` property.
+This fixes a regression introduced in #10452 where `queryOptions` only accepted plain arrays for the `queryKey` property, but not `computed` refs, `Ref` values, or getter functions. The related fix in #10465 only covered the `enabled` property.
 
-Now the `queryKey` property in `queryOptions` correctly accepts:
+Now the `queryKey` property in `queryOptions` accepts the same reactive forms as `enabled`:
 - Plain `QueryKey` arrays
 - `Ref<QueryKey>`
 - `ComputedRef<QueryKey>`
+- `() => QueryKey` (getter)
diff --git a/packages/vue-query/src/__tests__/queryOptions.test-d.ts b/packages/vue-query/src/__tests__/queryOptions.test-d.ts
index a0fe82bc8ac..5d7ed19c9e7 100644
--- a/packages/vue-query/src/__tests__/queryOptions.test-d.ts
+++ b/packages/vue-query/src/__tests__/queryOptions.test-d.ts
@@ -321,4 +321,15 @@ describe('queryOptions', () => {
 
     expectTypeOf(options.queryKey).not.toBeUndefined()
   })
+
+  it('should allow getter function as queryKey', () => {
+    const id = ref<string | null>('1')
+
+    const options = queryOptions({
+      queryKey: () => ['foo', id.value] as const,
+      queryFn: () => Promise.resolve({ id: '1' }),
+    })
+
+    expectTypeOf(options.queryKey).not.toBeUndefined()
+  })
 })
diff --git a/packages/vue-query/src/queryOptions.ts b/packages/vue-query/src/queryOptions.ts
index 881797203d4..2c05a0cb969 100644
--- a/packages/vue-query/src/queryOptions.ts
+++ b/packages/vue-query/src/queryOptions.ts
@@ -1,9 +1,4 @@
-import type {
-  DeepUnwrapRef,
-  MaybeRef,
-  MaybeRefOrGetter,
-  ShallowOption,
-} from './types'
+import type { DeepUnwrapRef, MaybeRefOrGetter, ShallowOption } from './types'
 import type {
   DataTag,
   DefaultError,
@@ -37,7 +32,7 @@ export type QueryOptions<
             DeepUnwrapRef<TQueryKey>
           >)
     : Property extends 'queryKey'
-      ? MaybeRef<TQueryKey>
+      ? MaybeRefOrGetter<TQueryKey>
       : QueryObserverOptions<
           TQueryFnData,
           TError,