diff --git a/packages/svelte-query-persist-client/tests/AwaitOnSuccess/AwaitOnSuccess.svelte b/packages/svelte-query-persist-client/tests/AwaitOnSuccess/AwaitOnSuccess.svelte
index a219a4d99f..cf8764a015 100644
--- a/packages/svelte-query-persist-client/tests/AwaitOnSuccess/AwaitOnSuccess.svelte
+++ b/packages/svelte-query-persist-client/tests/AwaitOnSuccess/AwaitOnSuccess.svelte
@@ -1,9 +1,8 @@
 <script lang="ts">
   import { createQuery } from '@tanstack/svelte-query'
-  import { sleep } from '../utils'
+  import { sleep } from '../utils.svelte'
 
-  let { key, states = $bindable() }: { key: string[]; states: string[] } =
-    $props()
+  let { key, states }: { key: Array<string>; states: Array<string> } = $props()
 
   const state = createQuery({
     queryKey: key,
diff --git a/packages/svelte-query-persist-client/tests/AwaitOnSuccess/Provider.svelte b/packages/svelte-query-persist-client/tests/AwaitOnSuccess/Provider.svelte
index f0a3879e96..a717a2357f 100644
--- a/packages/svelte-query-persist-client/tests/AwaitOnSuccess/Provider.svelte
+++ b/packages/svelte-query-persist-client/tests/AwaitOnSuccess/Provider.svelte
@@ -12,15 +12,9 @@
     states: Array<string>
   }
 
-  let {
-    queryClient,
-    persistOptions,
-    key,
-    onSuccess,
-    states = $bindable(),
-  }: Props = $props()
+  let { queryClient, persistOptions, key, onSuccess, states }: Props = $props()
 </script>
 
 <PersistQueryClientProvider client={queryClient} {persistOptions} {onSuccess}>
-  <AwaitOnSuccess {key} bind:states />
+  <AwaitOnSuccess {key} {states} />
 </PersistQueryClientProvider>
diff --git a/packages/svelte-query-persist-client/tests/FreshData/FreshData.svelte b/packages/svelte-query-persist-client/tests/FreshData/FreshData.svelte
index 33f1abcf13..790126d48f 100644
--- a/packages/svelte-query-persist-client/tests/FreshData/FreshData.svelte
+++ b/packages/svelte-query-persist-client/tests/FreshData/FreshData.svelte
@@ -1,22 +1,22 @@
 <script lang="ts">
   import { untrack } from 'svelte'
   import { createQuery } from '@tanstack/svelte-query'
-  import { sleep } from '../utils'
-  import type { StatusResult } from '../utils'
+  import { sleep } from '../utils.svelte'
+  import type { StatusResult } from '../utils.svelte'
 
   let {
     key,
-    states = $bindable(),
+    states,
   }: {
     key: Array<string>
-    states: Array<StatusResult<string>>
+    states: { value: Array<StatusResult<string>> }
     fetched: boolean
   } = $props()
 
   const query = createQuery({
     queryKey: key,
     queryFn: async () => {
-      states.push('fetched')
+      states.value.push('fetched')
       await sleep(10)
       return 'fetched'
     },
@@ -24,10 +24,7 @@
     staleTime: Infinity,
   })
   $effect(() => {
-    JSON.stringify(query.data)
-    untrack(() => {
-      states.push($state.snapshot(query))
-    })
+    states.value = [...untrack(() => states.value), $state.snapshot(query)]
   })
 </script>
 
diff --git a/packages/svelte-query-persist-client/tests/FreshData/Provider.svelte b/packages/svelte-query-persist-client/tests/FreshData/Provider.svelte
index 835011ae02..657b1aea3f 100644
--- a/packages/svelte-query-persist-client/tests/FreshData/Provider.svelte
+++ b/packages/svelte-query-persist-client/tests/FreshData/Provider.svelte
@@ -3,13 +3,13 @@
   import FreshData from './FreshData.svelte'
   import type { OmitKeyof, QueryClient } from '@tanstack/svelte-query'
   import type { PersistQueryClientOptions } from '@tanstack/query-persist-client-core'
-  import type { StatusResult } from '../utils'
+  import type { StatusResult } from '../utils.svelte'
 
   interface Props {
     queryClient: QueryClient
     persistOptions: OmitKeyof<PersistQueryClientOptions, 'queryClient'>
     key: Array<string>
-    states: Array<StatusResult<string>>
+    states: { value: Array<StatusResult<string>> }
     fetched: boolean
   }
 
diff --git a/packages/svelte-query-persist-client/tests/InitialData/InitialData.svelte b/packages/svelte-query-persist-client/tests/InitialData/InitialData.svelte
index 17824587ca..3716a08b11 100644
--- a/packages/svelte-query-persist-client/tests/InitialData/InitialData.svelte
+++ b/packages/svelte-query-persist-client/tests/InitialData/InitialData.svelte
@@ -1,15 +1,15 @@
 <script lang="ts">
   import { untrack } from 'svelte'
   import { createQuery } from '@tanstack/svelte-query'
-  import { sleep } from '../utils'
-  import type { StatusResult } from '../utils'
+  import { sleep } from '../utils.svelte'
+  import type { StatusResult } from '../utils.svelte'
 
   let {
     key,
-    states = $bindable(),
+    states,
   }: {
     key: Array<string>
-    states: Array<StatusResult<string>>
+    states: { value: Array<StatusResult<string>> }
   } = $props()
 
   const query = createQuery({
@@ -26,10 +26,7 @@
   })
 
   $effect(() => {
-    JSON.stringify(query)
-    untrack(() => {
-      states.push($state.snapshot(query))
-    })
+    states.value = [...untrack(() => states.value), $state.snapshot(query)]
   })
 </script>
 
diff --git a/packages/svelte-query-persist-client/tests/InitialData/Provider.svelte b/packages/svelte-query-persist-client/tests/InitialData/Provider.svelte
index 37f9644134..51250ac5dc 100644
--- a/packages/svelte-query-persist-client/tests/InitialData/Provider.svelte
+++ b/packages/svelte-query-persist-client/tests/InitialData/Provider.svelte
@@ -3,23 +3,18 @@
   import InitialData from './InitialData.svelte'
   import type { OmitKeyof, QueryClient } from '@tanstack/svelte-query'
   import type { PersistQueryClientOptions } from '@tanstack/query-persist-client-core'
-  import type { StatusResult } from '../utils'
+  import type { StatusResult } from '../utils.svelte'
 
   interface Props {
     queryClient: QueryClient
     persistOptions: OmitKeyof<PersistQueryClientOptions, 'queryClient'>
     key: Array<string>
-    states: Array<StatusResult<string>>
+    states: { value: Array<StatusResult<string>> }
   }
 
-  let {
-    queryClient,
-    persistOptions,
-    key,
-    states = $bindable(),
-  }: Props = $props()
+  let { queryClient, persistOptions, key, states }: Props = $props()
 </script>
 
 <PersistQueryClientProvider client={queryClient} {persistOptions}>
-  <InitialData {key} bind:states />
+  <InitialData {key} {states} />
 </PersistQueryClientProvider>
diff --git a/packages/svelte-query-persist-client/tests/OnSuccess/OnSuccess.svelte b/packages/svelte-query-persist-client/tests/OnSuccess/OnSuccess.svelte
index 8bd6f0240c..f1e5a81421 100644
--- a/packages/svelte-query-persist-client/tests/OnSuccess/OnSuccess.svelte
+++ b/packages/svelte-query-persist-client/tests/OnSuccess/OnSuccess.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { createQuery } from '@tanstack/svelte-query'
-  import { sleep } from '../utils'
+  import { sleep } from '../utils.svelte'
 
   interface Props {
     key: Array<string>
diff --git a/packages/svelte-query-persist-client/tests/PersistQueryClientProvider.test.svelte.ts b/packages/svelte-query-persist-client/tests/PersistQueryClientProvider.svelte.test.ts
similarity index 89%
rename from packages/svelte-query-persist-client/tests/PersistQueryClientProvider.test.svelte.ts
rename to packages/svelte-query-persist-client/tests/PersistQueryClientProvider.svelte.test.ts
index 26d8849c39..00bf560d99 100644
--- a/packages/svelte-query-persist-client/tests/PersistQueryClientProvider.test.svelte.ts
+++ b/packages/svelte-query-persist-client/tests/PersistQueryClientProvider.svelte.test.ts
@@ -8,13 +8,13 @@ import InitialData from './InitialData/Provider.svelte'
 import RemoveCache from './RemoveCache/Provider.svelte'
 import RestoreCache from './RestoreCache/Provider.svelte'
 import UseQueries from './UseQueries/Provider.svelte'
-import { createQueryClient, queryKey, sleep } from './utils'
+import { createQueryClient, queryKey, ref, sleep } from './utils.svelte'
 
 import type {
   PersistedClient,
   Persister,
 } from '@tanstack/query-persist-client-core'
-import type { StatusResult } from './utils'
+import type { StatusResult } from './utils.svelte'
 
 const createMockPersister = (): Persister => {
   let storedState: PersistedClient | undefined
@@ -55,7 +55,7 @@ const createMockErrorPersister = (
 describe('PersistQueryClientProvider', () => {
   test('restores cache from persister', async () => {
     const key = queryKey()
-    const states: Array<StatusResult<string>> = $state([])
+    let states = ref<Array<StatusResult<string>>>([])
 
     const queryClient = createQueryClient()
     await queryClient.prefetchQuery({
@@ -82,21 +82,21 @@ describe('PersistQueryClientProvider', () => {
     await waitFor(() => rendered.getByText('hydrated'))
     await waitFor(() => rendered.getByText('fetched'))
 
-    expect(states).toHaveLength(3)
+    expect(states.value).toHaveLength(3)
 
-    expect(states[0]).toMatchObject({
+    expect(states.value[0]).toMatchObject({
       status: 'pending',
       fetchStatus: 'idle',
       data: undefined,
     })
 
-    expect(states[1]).toMatchObject({
+    expect(states.value[1]).toMatchObject({
       status: 'success',
       fetchStatus: 'fetching',
       data: 'hydrated',
     })
 
-    expect(states[2]).toMatchObject({
+    expect(states.value[2]).toMatchObject({
       status: 'success',
       fetchStatus: 'idle',
       data: 'fetched',
@@ -111,7 +111,7 @@ describe('PersistQueryClientProvider', () => {
 
   test('should also put useQueries into idle state', async () => {
     const key = queryKey()
-    const states: Array<StatusResult<string>> = $state([])
+    let states = ref<Array<StatusResult<string>>>([])
 
     const queryClient = createQueryClient()
     await queryClient.prefetchQuery({
@@ -138,21 +138,21 @@ describe('PersistQueryClientProvider', () => {
     await waitFor(() => rendered.getByText('hydrated'))
     await waitFor(() => rendered.getByText('fetched'))
 
-    expect(states).toHaveLength(3)
+    expect(states.value).toHaveLength(3)
 
-    expect(states[0]).toMatchObject({
+    expect(states.value[0]).toMatchObject({
       status: 'pending',
       fetchStatus: 'idle',
       data: undefined,
     })
 
-    expect(states[1]).toMatchObject({
+    expect(states.value[1]).toMatchObject({
       status: 'success',
       fetchStatus: 'fetching',
       data: 'hydrated',
     })
 
-    expect(states[2]).toMatchObject({
+    expect(states.value[2]).toMatchObject({
       status: 'success',
       fetchStatus: 'idle',
       data: 'fetched',
@@ -161,7 +161,7 @@ describe('PersistQueryClientProvider', () => {
 
   test('should show initialData while restoring', async () => {
     const key = queryKey()
-    const states: Array<StatusResult<string>> = $state([])
+    let states = ref<Array<StatusResult<string>>>([])
 
     const queryClient = createQueryClient()
     await queryClient.prefetchQuery({
@@ -188,15 +188,15 @@ describe('PersistQueryClientProvider', () => {
     await waitFor(() => rendered.getByText('hydrated'))
     await waitFor(() => rendered.getByText('fetched'))
 
-    expect(states).toHaveLength(3)
+    expect(states.value).toHaveLength(3)
 
-    expect(states[0]).toMatchObject({
+    expect(states.value[0]).toMatchObject({
       status: 'success',
       fetchStatus: 'idle',
       data: 'initial',
     })
 
-    expect(states[1]).toMatchObject({
+    expect(states.value[1]).toMatchObject({
       status: 'success',
       fetchStatus: 'fetching',
       data: 'hydrated',
@@ -208,7 +208,7 @@ describe('PersistQueryClientProvider', () => {
       data: 'hydrated',
     }) */
 
-    expect(states[2]).toMatchObject({
+    expect(states.value[2]).toMatchObject({
       status: 'success',
       fetchStatus: 'idle',
       data: 'fetched',
@@ -217,7 +217,7 @@ describe('PersistQueryClientProvider', () => {
 
   test('should not refetch after restoring when data is fresh', async () => {
     const key = queryKey()
-    const states: Array<StatusResult<string>> = $state([])
+    let states = ref<Array<StatusResult<string>>>([])
 
     const queryClient = createQueryClient()
     await queryClient.prefetchQuery({
@@ -248,15 +248,15 @@ describe('PersistQueryClientProvider', () => {
 
     expect(fetched).toBe(false)
 
-    expect(states).toHaveLength(2)
-    console.log('statesa', states)
-    expect(states[0]).toMatchObject({
+    expect(states.value).toHaveLength(2)
+
+    expect(states.value[0]).toMatchObject({
       status: 'pending',
       fetchStatus: 'idle',
       data: undefined,
     })
 
-    expect(states[1]).toMatchObject({
+    expect(states.value[1]).toMatchObject({
       status: 'success',
       fetchStatus: 'idle',
       data: 'hydrated',
diff --git a/packages/svelte-query-persist-client/tests/RemoveCache/RemoveCache.svelte b/packages/svelte-query-persist-client/tests/RemoveCache/RemoveCache.svelte
index 8bd6f0240c..f1e5a81421 100644
--- a/packages/svelte-query-persist-client/tests/RemoveCache/RemoveCache.svelte
+++ b/packages/svelte-query-persist-client/tests/RemoveCache/RemoveCache.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { createQuery } from '@tanstack/svelte-query'
-  import { sleep } from '../utils'
+  import { sleep } from '../utils.svelte'
 
   interface Props {
     key: Array<string>
diff --git a/packages/svelte-query-persist-client/tests/RestoreCache/Provider.svelte b/packages/svelte-query-persist-client/tests/RestoreCache/Provider.svelte
index 74fb264a5a..fbe8038257 100644
--- a/packages/svelte-query-persist-client/tests/RestoreCache/Provider.svelte
+++ b/packages/svelte-query-persist-client/tests/RestoreCache/Provider.svelte
@@ -3,23 +3,18 @@
   import RestoreCache from './RestoreCache.svelte'
   import type { OmitKeyof, QueryClient } from '@tanstack/svelte-query'
   import type { PersistQueryClientOptions } from '@tanstack/query-persist-client-core'
-  import type { StatusResult } from '../utils'
+  import type { StatusResult } from '../utils.svelte'
 
   interface Props {
     queryClient: QueryClient
     persistOptions: OmitKeyof<PersistQueryClientOptions, 'queryClient'>
     key: Array<string>
-    states: Array<StatusResult<string>>
+    states: { value: Array<StatusResult<string>> }
   }
 
-  let {
-    queryClient,
-    persistOptions,
-    key,
-    states = $bindable(),
-  }: Props = $props()
+  let { queryClient, persistOptions, key, states }: Props = $props()
 </script>
 
 <PersistQueryClientProvider client={queryClient} {persistOptions}>
-  <RestoreCache {key} bind:states />
+  <RestoreCache {key} {states} />
 </PersistQueryClientProvider>
diff --git a/packages/svelte-query-persist-client/tests/RestoreCache/RestoreCache.svelte b/packages/svelte-query-persist-client/tests/RestoreCache/RestoreCache.svelte
index 0701f6f9f6..876541bc3f 100644
--- a/packages/svelte-query-persist-client/tests/RestoreCache/RestoreCache.svelte
+++ b/packages/svelte-query-persist-client/tests/RestoreCache/RestoreCache.svelte
@@ -1,18 +1,18 @@
 <script lang="ts">
   import { untrack } from 'svelte'
   import { createQuery } from '@tanstack/svelte-query'
-  import { sleep } from '../utils'
-  import type { StatusResult } from '../utils'
+  import { sleep } from '../utils.svelte'
+  import type { StatusResult } from '../utils.svelte'
 
   let {
     key,
-    states = $bindable(),
+    states,
   }: {
     key: Array<string>
-    states: Array<StatusResult<string>>
+    states: { value: Array<StatusResult<string>> }
   } = $props()
 
-  const ss = createQuery({
+  const query = createQuery({
     queryKey: key,
     queryFn: async () => {
       await sleep(10)
@@ -21,15 +21,11 @@
   })
 
   $effect(() => {
-    console.log('initial data', ss)
-    JSON.stringify(ss)
-    untrack(() => {
-      states.push($state.snapshot(ss))
-    })
+    states.value = [...untrack(() => states.value), $state.snapshot(query)]
   })
 </script>
 
 <div>
-  <h1>{ss.data}</h1>
-  <h2>fetchStatus: {ss.fetchStatus}</h2>
+  <h1>{query.data}</h1>
+  <h2>fetchStatus: {query.fetchStatus}</h2>
 </div>
diff --git a/packages/svelte-query-persist-client/tests/UseQueries/Provider.svelte b/packages/svelte-query-persist-client/tests/UseQueries/Provider.svelte
index f9e1922f35..06e67de7d7 100644
--- a/packages/svelte-query-persist-client/tests/UseQueries/Provider.svelte
+++ b/packages/svelte-query-persist-client/tests/UseQueries/Provider.svelte
@@ -3,21 +3,16 @@
   import UseQueries from './UseQueries.svelte'
   import type { OmitKeyof, QueryClient } from '@tanstack/svelte-query'
   import type { PersistQueryClientOptions } from '@tanstack/query-persist-client-core'
-  import type { StatusResult } from '../utils'
+  import type { StatusResult } from '../utils.svelte'
 
   interface Props {
     queryClient: QueryClient
     persistOptions: OmitKeyof<PersistQueryClientOptions, 'queryClient'>
     key: Array<string>
-    states: Array<StatusResult<string>>
+    states: { value: Array<StatusResult<string>> }
   }
 
-  let {
-    queryClient,
-    persistOptions,
-    key,
-    states = $bindable(),
-  }: Props = $props()
+  let { queryClient, persistOptions, key, states }: Props = $props()
 </script>
 
 <PersistQueryClientProvider client={queryClient} {persistOptions}>
diff --git a/packages/svelte-query-persist-client/tests/UseQueries/UseQueries.svelte b/packages/svelte-query-persist-client/tests/UseQueries/UseQueries.svelte
index 02f86831fd..d603acefdd 100644
--- a/packages/svelte-query-persist-client/tests/UseQueries/UseQueries.svelte
+++ b/packages/svelte-query-persist-client/tests/UseQueries/UseQueries.svelte
@@ -1,15 +1,15 @@
 <script lang="ts">
   import { untrack } from 'svelte'
   import { createQueries } from '@tanstack/svelte-query'
-  import { sleep } from '../utils'
-  import type { StatusResult } from '../utils'
+  import { sleep } from '../utils.svelte'
+  import type { StatusResult } from '../utils.svelte'
 
   let {
     key,
-    states = $bindable(),
+    states,
   }: {
     key: Array<string>
-    states: Array<StatusResult<string>>
+    states: { value: Array<StatusResult<string>> }
   } = $props()
 
   const s = createQueries({
@@ -25,10 +25,7 @@
   })
 
   $effect(() => {
-    JSON.stringify(s)
-    untrack(() => {
-      states.push($state.snapshot(s[0]))
-    })
+    states.value = [...untrack(() => states.value), $state.snapshot(s[0])]
   })
 </script>
 
diff --git a/packages/svelte-query-persist-client/tests/utils.ts b/packages/svelte-query-persist-client/tests/utils.svelte.ts
similarity index 76%
rename from packages/svelte-query-persist-client/tests/utils.ts
rename to packages/svelte-query-persist-client/tests/utils.svelte.ts
index c02d3110a0..2518fee2d1 100644
--- a/packages/svelte-query-persist-client/tests/utils.ts
+++ b/packages/svelte-query-persist-client/tests/utils.svelte.ts
@@ -23,3 +23,16 @@ export type StatusResult<T = unknown> = {
   fetchStatus: string
   data: T | undefined
 }
+
+export function ref<T>(initial: T) {
+  let value = $state(initial)
+
+  return {
+    get value() {
+      return value
+    },
+    set value(newValue) {
+      value = newValue
+    },
+  }
+}
diff --git a/packages/svelte-query-persist-client/vite.config.ts b/packages/svelte-query-persist-client/vite.config.ts
index af34d9a112..3f68d52480 100644
--- a/packages/svelte-query-persist-client/vite.config.ts
+++ b/packages/svelte-query-persist-client/vite.config.ts
@@ -9,7 +9,6 @@ export default defineConfig({
     name: packageJson.name,
     dir: './tests',
     watch: false,
-    include: ['**/*.svelte.ts'],
     environment: 'jsdom',
     setupFiles: ['./tests/test-setup.ts'],
     coverage: { enabled: true, provider: 'istanbul', include: ['src/**/*'] },
diff --git a/packages/svelte-query/tests/QueryClientProvider/ChildComponent.svelte b/packages/svelte-query/tests/QueryClientProvider/ChildComponent.svelte
index fde5ed6fb1..7cebabec0f 100644
--- a/packages/svelte-query/tests/QueryClientProvider/ChildComponent.svelte
+++ b/packages/svelte-query/tests/QueryClientProvider/ChildComponent.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { createQuery } from '../../src/createQuery'
-  import { sleep } from '../utils'
+  import { sleep } from '../utils.svelte'
 
   const query = createQuery({
     queryKey: ['hello'],
diff --git a/packages/svelte-query/tests/createInfiniteQuery/BaseExample.svelte b/packages/svelte-query/tests/createInfiniteQuery/BaseExample.svelte
index 342f44eab3..ab6b402b32 100644
--- a/packages/svelte-query/tests/createInfiniteQuery/BaseExample.svelte
+++ b/packages/svelte-query/tests/createInfiniteQuery/BaseExample.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
   import { QueryClient } from '@tanstack/query-core'
   import { createInfiniteQuery } from '../../src/createInfiniteQuery'
-  import { sleep } from '../utils'
+  import { sleep } from '../utils.svelte'
+
   const queryClient = new QueryClient()
 
   const query = createInfiniteQuery(
diff --git a/packages/svelte-query/tests/createInfiniteQuery/createInfiniteQuery.test.ts b/packages/svelte-query/tests/createInfiniteQuery/createInfiniteQuery.test.ts
index bd1b88c0d1..6fc8fecf02 100644
--- a/packages/svelte-query/tests/createInfiniteQuery/createInfiniteQuery.test.ts
+++ b/packages/svelte-query/tests/createInfiniteQuery/createInfiniteQuery.test.ts
@@ -1,7 +1,7 @@
-import { describe, expect, test } from 'vitest'
-import { render, waitFor, screen } from '@testing-library/svelte'
+import { describe, test } from 'vitest'
+import { render } from '@testing-library/svelte'
 
-import { sleep } from '../utils'
+import { sleep } from '../utils.svelte'
 import BaseExample from './BaseExample.svelte'
 
 describe('createQuery', () => {
diff --git a/packages/svelte-query/tests/createQueries/createQueries.test.ts b/packages/svelte-query/tests/createQueries/createQueries.test.ts
index b5f5a59cd5..f3ce4af95c 100644
--- a/packages/svelte-query/tests/createQueries/createQueries.test.ts
+++ b/packages/svelte-query/tests/createQueries/createQueries.test.ts
@@ -1,7 +1,7 @@
 import { describe, expect, test } from 'vitest'
 import { render, waitFor } from '@testing-library/svelte'
 import { QueryClient } from '@tanstack/query-core'
-import { sleep } from '../utils'
+import { sleep } from '../utils.svelte'
 import BaseExample from './BaseExample.svelte'
 
 describe('createQueries', () => {
diff --git a/packages/svelte-query/tests/createQuery/BaseExample.svelte b/packages/svelte-query/tests/createQuery/BaseExample.svelte
index c89e4c1e61..bda0f8940e 100644
--- a/packages/svelte-query/tests/createQuery/BaseExample.svelte
+++ b/packages/svelte-query/tests/createQuery/BaseExample.svelte
@@ -7,20 +7,17 @@
   let {
     options,
     queryClient,
-    states = $bindable(),
+    states,
   }: {
     options: CreateQueryOptions<any>
     queryClient: QueryClient
-    states: Array<QueryObserverResult>
+    states: { value: Array<QueryObserverResult> }
   } = $props()
 
   const query = createQuery(options, queryClient)
 
   $effect(() => {
-    JSON.stringify(query)
-    untrack(() => {
-      states.push($state.snapshot(query))
-    })
+    states.value = [...untrack(() => states.value), $state.snapshot(query)]
   })
 </script>
 
diff --git a/packages/svelte-query/tests/createQuery/DisabledExample.svelte b/packages/svelte-query/tests/createQuery/DisabledExample.svelte
index faac99c118..4eba0fb0a3 100644
--- a/packages/svelte-query/tests/createQuery/DisabledExample.svelte
+++ b/packages/svelte-query/tests/createQuery/DisabledExample.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { QueryClient } from '@tanstack/query-core'
   import { createQuery } from '../../src/index'
-  import { queryKey, sleep } from '../utils'
+  import { queryKey, sleep } from '../utils.svelte'
 
   const queryClient = new QueryClient()
   const key = queryKey()
diff --git a/packages/svelte-query/tests/createQuery/PlaceholderData.svelte b/packages/svelte-query/tests/createQuery/PlaceholderData.svelte
index 3f784b9bf9..afa9e23737 100644
--- a/packages/svelte-query/tests/createQuery/PlaceholderData.svelte
+++ b/packages/svelte-query/tests/createQuery/PlaceholderData.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { untrack } from 'svelte'
   import { createQuery, keepPreviousData } from '../../src/index'
-  import { sleep } from '../utils'
+  import { sleep } from '../utils.svelte'
   import type { QueryClient, QueryObserverResult } from '@tanstack/query-core'
 
   let {
@@ -9,7 +9,7 @@
     states,
   }: {
     queryClient: QueryClient
-    states: Array<QueryObserverResult>
+    states: { value: Array<QueryObserverResult> }
   } = $props()
 
   let count = $state(0)
@@ -26,10 +26,7 @@
   const query = createQuery(options, queryClient)
 
   $effect(() => {
-    JSON.stringify(query)
-    untrack(() => {
-      states.push($state.snapshot(query))
-    })
+    states.value = [...untrack(() => states.value), $state.snapshot(query)]
   })
 </script>
 
diff --git a/packages/svelte-query/tests/createQuery/createQuery.svelte.test.ts b/packages/svelte-query/tests/createQuery/createQuery.svelte.test.ts
index 7f4bc1be86..ef9f95ca91 100644
--- a/packages/svelte-query/tests/createQuery/createQuery.svelte.test.ts
+++ b/packages/svelte-query/tests/createQuery/createQuery.svelte.test.ts
@@ -1,7 +1,7 @@
 import { describe, expect, test } from 'vitest'
 import { fireEvent, render, waitFor } from '@testing-library/svelte'
 import { QueryClient } from '@tanstack/query-core'
-import { sleep } from '../utils'
+import { ref, sleep } from '../utils.svelte'
 import BaseExample from './BaseExample.svelte'
 import DisabledExample from './DisabledExample.svelte'
 import PlaceholderData from './PlaceholderData.svelte'
@@ -9,7 +9,7 @@ import type { QueryObserverResult } from '@tanstack/query-core'
 
 describe('createQuery', () => {
   test('Return the correct states for a successful query', async () => {
-    let states: Array<QueryObserverResult> = $state([])
+    let states = ref<Array<QueryObserverResult>>([])
 
     const options = {
       queryKey: ['test'],
@@ -31,9 +31,9 @@ describe('createQuery', () => {
       expect(rendered.queryByText('Success')).toBeInTheDocument()
     })
 
-    expect(states).toHaveLength(2)
+    expect(states.value).toHaveLength(2)
 
-    expect(states[0]).toMatchObject({
+    expect(states.value[0]).toMatchObject({
       data: undefined,
       dataUpdatedAt: 0,
       error: null,
@@ -60,7 +60,7 @@ describe('createQuery', () => {
       fetchStatus: 'fetching',
     })
 
-    expect(states[1]).toMatchObject({
+    expect(states.value[1]).toMatchObject({
       data: 'Success',
       dataUpdatedAt: expect.any(Number),
       error: null,
@@ -89,7 +89,7 @@ describe('createQuery', () => {
   })
 
   test('Return the correct states for an unsuccessful query', async () => {
-    const states: Array<QueryObserverResult> = $state([])
+    let states = ref<Array<QueryObserverResult>>([])
 
     const options = {
       queryKey: ['test'],
@@ -108,9 +108,9 @@ describe('createQuery', () => {
 
     await waitFor(() => rendered.getByText('Status: error'))
 
-    expect(states).toHaveLength(3)
+    expect(states.value).toHaveLength(3)
 
-    expect(states[0]).toMatchObject({
+    expect(states.value[0]).toMatchObject({
       data: undefined,
       dataUpdatedAt: 0,
       error: null,
@@ -137,7 +137,7 @@ describe('createQuery', () => {
       fetchStatus: 'fetching',
     })
 
-    expect(states[1]).toMatchObject({
+    expect(states.value[1]).toMatchObject({
       data: undefined,
       dataUpdatedAt: 0,
       error: null,
@@ -164,7 +164,7 @@ describe('createQuery', () => {
       fetchStatus: 'fetching',
     })
 
-    expect(states[2]).toMatchObject({
+    expect(states.value[2]).toMatchObject({
       data: undefined,
       dataUpdatedAt: 0,
       error: new Error('Rejected'),
@@ -193,7 +193,7 @@ describe('createQuery', () => {
   })
 
   test('Accept a writable store for options', async () => {
-    const statesStore: Array<QueryObserverResult> = $state([])
+    let states = ref<Array<QueryObserverResult>>([])
 
     const optionsStore = $state({
       queryKey: ['test'],
@@ -207,7 +207,7 @@ describe('createQuery', () => {
       props: {
         options: optionsStore,
         queryClient: new QueryClient(),
-        states: statesStore,
+        states,
       },
     })
 
@@ -217,7 +217,7 @@ describe('createQuery', () => {
   })
 
   test('Accept a derived store for options', async () => {
-    const states: Array<QueryObserverResult> = $state([])
+    let states = ref<Array<QueryObserverResult>>([])
 
     const writableStore = $state('test')
 
@@ -243,7 +243,7 @@ describe('createQuery', () => {
   })
 
   test('Ensure reactivity when queryClient defaults are set', async () => {
-    const states: Array<QueryObserverResult> = $state([])
+    let states = ref<Array<QueryObserverResult>>([])
 
     let writableStore = $state(1)
 
@@ -286,7 +286,7 @@ describe('createQuery', () => {
   })
 
   test('Keep previous data when placeholderData is set', async () => {
-    const states: Array<QueryObserverResult> = $state([])
+    let states = ref<Array<QueryObserverResult>>([])
 
     const rendered = render(PlaceholderData, {
       props: {
@@ -301,31 +301,31 @@ describe('createQuery', () => {
 
     await waitFor(() => rendered.getByText('Data: 1'))
 
-    expect(states).toHaveLength(4)
+    expect(states.value).toHaveLength(4)
 
     // Initial
-    expect(states[0]).toMatchObject({
+    expect(states.value[0]).toMatchObject({
       data: undefined,
       isFetching: true,
       isSuccess: false,
       isPlaceholderData: false,
     })
     // Fetched
-    expect(states[1]).toMatchObject({
+    expect(states.value[1]).toMatchObject({
       data: 0,
       isFetching: false,
       isSuccess: true,
       isPlaceholderData: false,
     })
     // Set state
-    expect(states[2]).toMatchObject({
+    expect(states.value[2]).toMatchObject({
       data: 0,
       isFetching: true,
       isSuccess: true,
       isPlaceholderData: true,
     })
     // New data
-    expect(states[3]).toMatchObject({
+    expect(states.value[3]).toMatchObject({
       data: 1,
       isFetching: false,
       isSuccess: true,
diff --git a/packages/svelte-query/tests/useIsFetching/BaseExample.svelte b/packages/svelte-query/tests/useIsFetching/BaseExample.svelte
index 3db0c5bf6e..7307e263c7 100644
--- a/packages/svelte-query/tests/useIsFetching/BaseExample.svelte
+++ b/packages/svelte-query/tests/useIsFetching/BaseExample.svelte
@@ -2,7 +2,7 @@
   import { QueryClient } from '@tanstack/query-core'
   import { createQuery } from '../../src/'
   import { useIsFetching } from '../../src/useIsFetching.svelte'
-  import { queryKey, sleep } from '../utils'
+  import { queryKey, sleep } from '../utils.svelte'
 
   const queryClient = new QueryClient()
   const key = queryKey()
diff --git a/packages/svelte-query/tests/useIsMutating/BaseExample.svelte b/packages/svelte-query/tests/useIsMutating/BaseExample.svelte
index 73f9669890..3f0fcdf45e 100644
--- a/packages/svelte-query/tests/useIsMutating/BaseExample.svelte
+++ b/packages/svelte-query/tests/useIsMutating/BaseExample.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { QueryClient } from '@tanstack/query-core'
   import { createMutation } from '../../src/createMutation.svelte'
-  import { sleep } from '../utils'
+  import { sleep } from '../utils.svelte'
   import { useIsMutating } from '../../src/useIsMutating.svelte'
 
   const queryClient = new QueryClient()
diff --git a/packages/svelte-query/tests/utils.ts b/packages/svelte-query/tests/utils.svelte.ts
similarity index 58%
rename from packages/svelte-query/tests/utils.ts
rename to packages/svelte-query/tests/utils.svelte.ts
index e8c5baf88b..85bb50147b 100644
--- a/packages/svelte-query/tests/utils.ts
+++ b/packages/svelte-query/tests/utils.svelte.ts
@@ -10,3 +10,16 @@ export function queryKey(): string {
   queryKeyCount += 1
   return `query_${queryKeyCount}`
 }
+
+export function ref<T>(initial: T) {
+  let value = $state(initial)
+
+  return {
+    get value() {
+      return value
+    },
+    set value(newValue) {
+      value = newValue
+    },
+  }
+}