fix(vue-query): allow computed ref as enabled property in queryOptions (#10465)

Fixes #10458

The enabled property in QueryOptions type was incorrectly restricted to only
accept getter functions (() => Enabled). This prevented using computed refs
and other Vue reactive values.

This change aligns QueryOptions.enabled type with UseQueryOptions.enabled,
allowing:
- boolean values
- Ref<boolean>
- ComputedRef<boolean>
- () => boolean getter functions
- (query) => boolean query predicates

Co-authored-by: Damian Osipiuk <osipiukd+git@gmail.com>

Author: byungsker

.changeset/fix-vue-query-options-enabled.md

@@ -0,0 +1,14 @@
+---
+'@tanstack/vue-query': patch
+---
+
+fix(vue-query): allow computed ref and other reactive values as `enabled` property in queryOptions
+
+This fixes a regression introduced in #10452 where `queryOptions` only accepted getter functions for the `enabled` property, but not `computed` refs or other reactive values.
+
+Now the `enabled` property in `queryOptions` correctly accepts:
+- `boolean` values
+- `Ref<boolean>` 
+- `ComputedRef<boolean>`
+- `() => boolean` getter functions
+- `(query) => boolean` query predicate functions

packages/vue-query/src/__tests__/queryOptions.test-d.ts

@@ -1,5 +1,5 @@
 import { assertType, describe, expectTypeOf, it } from 'vitest'
-import { reactive, ref } from 'vue-demi'
+import { computed, reactive, ref } from 'vue-demi'
 import { dataTagSymbol } from '@tanstack/query-core'
 import { queryKey } from '@tanstack/query-test-utils'
 import { QueryClient } from '../queryClient'
@@ -253,4 +253,49 @@ describe('queryOptions', () => {
     expectTypeOf(resolvedGetter.queryFn).not.toBeUndefined()
     expectTypeOf(resolvedGetter.queryKey).not.toBeUndefined()
   })
+
+  it('should allow computed ref as enabled property', () => {
+    const enabled = computed(() => true)
+
+    // This was broken in #10452, fixed in #10458
+    const options = queryOptions({
+      queryKey: ['key'],
+      queryFn: () => Promise.resolve(1),
+      enabled,
+    })
+
+    expectTypeOf(options.queryKey).not.toBeUndefined()
+  })
+
+  it('should allow ref as enabled property', () => {
+    const enabled = ref(true)
+
+    const options = queryOptions({
+      queryKey: ['key'],
+      queryFn: () => Promise.resolve(1),
+      enabled,
+    })
+
+    expectTypeOf(options.queryKey).not.toBeUndefined()
+  })
+
+  it('should allow boolean as enabled property', () => {
+    const options = queryOptions({
+      queryKey: ['key'],
+      queryFn: () => Promise.resolve(1),
+      enabled: true,
+    })
+
+    expectTypeOf(options.queryKey).not.toBeUndefined()
+  })
+
+  it('should allow getter function as enabled property', () => {
+    const options = queryOptions({
+      queryKey: ['key'],
+      queryFn: () => Promise.resolve(1),
+      enabled: () => true,
+    })
+
+    expectTypeOf(options.queryKey).not.toBeUndefined()
+  })
 })

packages/vue-query/src/queryOptions.ts

@@ -1,4 +1,4 @@
-import type { DeepUnwrapRef, ShallowOption } from './types'
+import type { DeepUnwrapRef, MaybeRefOrGetter, ShallowOption } from './types'
 import type {
   DataTag,
   DefaultError,
@@ -23,7 +23,14 @@ export type QueryOptions<
     TQueryData,
     TQueryKey
   >]: Property extends 'enabled'
-    ? () => Enabled<TQueryFnData, TError, TQueryData, DeepUnwrapRef<TQueryKey>>
+    ?
+        | MaybeRefOrGetter<boolean | undefined>
+        | (() => Enabled<
+            TQueryFnData,
+            TError,
+            TQueryData,
+            DeepUnwrapRef<TQueryKey>
+          >)
     : QueryObserverOptions<
         TQueryFnData,
         TError,