diff --git a/examples/vue/basic/src/App.vue b/examples/vue/basic/src/App.vue
index 52028d9dcd..c8275e1840 100644
--- a/examples/vue/basic/src/App.vue
+++ b/examples/vue/basic/src/App.vue
@@ -1,29 +1,29 @@
 <script lang="ts">
-import { defineComponent, ref } from "vue";
+import { defineComponent, ref } from 'vue'
 
-import Posts from "./Posts.vue";
-import Post from "./Post.vue";
+import Posts from './Posts.vue'
+import Post from './Post.vue'
 
 export default defineComponent({
-  name: "App",
+  name: 'App',
   components: { Posts, Post },
   setup() {
-    const visitedPosts = ref(new Set());
-    const isVisited = (id: number) => visitedPosts.value.has(id);
+    const visitedPosts = ref(new Set())
+    const isVisited = (id: number) => visitedPosts.value.has(id)
 
-    const postId = ref(-1);
+    const postId = ref(-1)
     const setPostId = (id: number) => {
-      visitedPosts.value.add(id);
-      postId.value = id;
-    };
+      visitedPosts.value.add(id)
+      postId.value = id
+    }
 
     return {
       isVisited,
       postId,
       setPostId,
-    };
+    }
   },
-});
+})
 </script>
 
 <template>
diff --git a/examples/vue/basic/src/Post.vue b/examples/vue/basic/src/Post.vue
index bb9f36e089..c0bef062d7 100644
--- a/examples/vue/basic/src/Post.vue
+++ b/examples/vue/basic/src/Post.vue
@@ -1,32 +1,32 @@
 <script lang="ts">
-import { defineComponent } from "vue";
-import { useQuery } from "@tanstack/vue-query";
+import { defineComponent } from 'vue'
+import { useQuery } from '@tanstack/vue-query'
 
-import { Post } from "./types";
+import { Post } from './types'
 
 const fetcher = async (id: number): Promise<Post> =>
   await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`).then(
-    (response) => response.json()
-  );
+    (response) => response.json(),
+  )
 
 export default defineComponent({
-  name: "PostDetails",
+  name: 'PostDetails',
   props: {
     postId: {
       type: Number,
       required: true,
     },
   },
-  emits: ["setPostId"],
+  emits: ['setPostId'],
   setup(props) {
     const { isLoading, isError, isFetching, data, error } = useQuery(
-      ["post", props.postId],
-      () => fetcher(props.postId)
-    );
+      ['post', props.postId],
+      () => fetcher(props.postId),
+    )
 
-    return { isLoading, isError, isFetching, data, error };
+    return { isLoading, isError, isFetching, data, error }
   },
-});
+})
 </script>
 
 <template>
diff --git a/examples/vue/basic/src/Posts.vue b/examples/vue/basic/src/Posts.vue
index 30816ac3c9..64432603d8 100644
--- a/examples/vue/basic/src/Posts.vue
+++ b/examples/vue/basic/src/Posts.vue
@@ -1,32 +1,32 @@
 <script lang="ts">
-import { defineComponent } from "vue";
-import { useQuery } from "@tanstack/vue-query";
+import { defineComponent } from 'vue'
+import { useQuery } from '@tanstack/vue-query'
 
-import type { Post } from "./types";
+import type { Post } from './types'
 
 const fetcher = async (): Promise<Post[]> =>
-  await fetch("https://jsonplaceholder.typicode.com/posts").then((response) =>
-    response.json()
-  );
+  await fetch('https://jsonplaceholder.typicode.com/posts').then((response) =>
+    response.json(),
+  )
 
 export default defineComponent({
-  name: "PostsList",
+  name: 'PostsList',
   props: {
     isVisited: {
       type: Function,
       required: true,
     },
   },
-  emits: ["setPostId"],
+  emits: ['setPostId'],
   setup() {
     const { isLoading, isError, isFetching, data, error, refetch } = useQuery(
-      ["posts"],
-      fetcher
-    );
+      ['posts'],
+      fetcher,
+    )
 
-    return { isLoading, isError, isFetching, data, error, refetch };
+    return { isLoading, isError, isFetching, data, error, refetch }
   },
-});
+})
 </script>
 
 <template>
diff --git a/examples/vue/basic/src/main.ts b/examples/vue/basic/src/main.ts
index 7c6ec1d6b8..e8ac89a8ab 100644
--- a/examples/vue/basic/src/main.ts
+++ b/examples/vue/basic/src/main.ts
@@ -1,6 +1,6 @@
-import { createApp } from "vue";
-import { VueQueryPlugin } from "@tanstack/vue-query";
+import { createApp } from 'vue'
+import { VueQueryPlugin } from '@tanstack/vue-query'
 
-import App from "./App.vue";
+import App from './App.vue'
 
-createApp(App).use(VueQueryPlugin).mount("#app");
+createApp(App).use(VueQueryPlugin).mount('#app')
diff --git a/examples/vue/basic/src/shims-vue.d.ts b/examples/vue/basic/src/shims-vue.d.ts
index daba9b9ec0..ac1ded7923 100644
--- a/examples/vue/basic/src/shims-vue.d.ts
+++ b/examples/vue/basic/src/shims-vue.d.ts
@@ -1,5 +1,5 @@
-declare module "*.vue" {
-  import { DefineComponent } from "vue";
-  const component: DefineComponent<{}, {}, any>;
-  export default component;
+declare module '*.vue' {
+  import { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
 }
diff --git a/examples/vue/basic/src/types.d.ts b/examples/vue/basic/src/types.d.ts
index 0ff5fbb96d..4851e81022 100644
--- a/examples/vue/basic/src/types.d.ts
+++ b/examples/vue/basic/src/types.d.ts
@@ -1,6 +1,6 @@
 export interface Post {
-  userId: number;
-  id: number;
-  title: string;
-  body: string;
+  userId: number
+  id: number
+  title: string
+  body: string
 }
diff --git a/examples/vue/persister/.gitignore b/examples/vue/persister/.gitignore
new file mode 100644
index 0000000000..d424f6a89a
--- /dev/null
+++ b/examples/vue/persister/.gitignore
@@ -0,0 +1,6 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
+package-lock.json
diff --git a/examples/vue/persister/README.md b/examples/vue/persister/README.md
new file mode 100644
index 0000000000..7573cb91da
--- /dev/null
+++ b/examples/vue/persister/README.md
@@ -0,0 +1,6 @@
+# Basic example
+
+To run this example:
+
+- `npm install` or `yarn`
+- `npm run dev` or `yarn dev`
diff --git a/examples/vue/persister/index.html b/examples/vue/persister/index.html
new file mode 100644
index 0000000000..547b3c19e6
--- /dev/null
+++ b/examples/vue/persister/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vue Query Example</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/examples/vue/persister/package.json b/examples/vue/persister/package.json
new file mode 100644
index 0000000000..cd79cb921b
--- /dev/null
+++ b/examples/vue/persister/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "@tanstack/query-example-vue-basic",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "build:dev": "vite build -m development",
+    "serve": "vite preview"
+  },
+  "dependencies": {
+    "vue": "3.2.41",
+    "@tanstack/vue-query": "^4.14.1",
+    "@tanstack/query-persist-client-core": "^4.14.1",
+    "@tanstack/query-sync-storage-persister": "^4.14.1"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "3.2.0",
+    "typescript": "4.8.4",
+    "vite": "3.2.2"
+  }
+}
diff --git a/examples/vue/persister/src/App.vue b/examples/vue/persister/src/App.vue
new file mode 100644
index 0000000000..c8275e1840
--- /dev/null
+++ b/examples/vue/persister/src/App.vue
@@ -0,0 +1,43 @@
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+
+import Posts from './Posts.vue'
+import Post from './Post.vue'
+
+export default defineComponent({
+  name: 'App',
+  components: { Posts, Post },
+  setup() {
+    const visitedPosts = ref(new Set())
+    const isVisited = (id: number) => visitedPosts.value.has(id)
+
+    const postId = ref(-1)
+    const setPostId = (id: number) => {
+      visitedPosts.value.add(id)
+      postId.value = id
+    }
+
+    return {
+      isVisited,
+      postId,
+      setPostId,
+    }
+  },
+})
+</script>
+
+<template>
+  <h1>Vue Query - Basic</h1>
+  <p>
+    As you visit the posts below, you will notice them in a loading state the
+    first time you load them. However, after you return to this list and click
+    on any posts you have already visited again, you will see them load
+    instantly and background refresh right before your eyes!
+    <strong>
+      (You may need to throttle your network speed to simulate longer loading
+      sequences)
+    </strong>
+  </p>
+  <Post v-if="postId > -1" :postId="postId" @setPostId="setPostId" />
+  <Posts v-else :isVisited="isVisited" @setPostId="setPostId" />
+</template>
diff --git a/examples/vue/persister/src/Post.vue b/examples/vue/persister/src/Post.vue
new file mode 100644
index 0000000000..c0bef062d7
--- /dev/null
+++ b/examples/vue/persister/src/Post.vue
@@ -0,0 +1,51 @@
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { useQuery } from '@tanstack/vue-query'
+
+import { Post } from './types'
+
+const fetcher = async (id: number): Promise<Post> =>
+  await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`).then(
+    (response) => response.json(),
+  )
+
+export default defineComponent({
+  name: 'PostDetails',
+  props: {
+    postId: {
+      type: Number,
+      required: true,
+    },
+  },
+  emits: ['setPostId'],
+  setup(props) {
+    const { isLoading, isError, isFetching, data, error } = useQuery(
+      ['post', props.postId],
+      () => fetcher(props.postId),
+    )
+
+    return { isLoading, isError, isFetching, data, error }
+  },
+})
+</script>
+
+<template>
+  <h1>Post {{ postId }}</h1>
+  <a @click="$emit('setPostId', -1)" href="#"> Back </a>
+  <div v-if="isLoading" class="update">Loading...</div>
+  <div v-else-if="isError">An error has occurred: {{ error }}</div>
+  <div v-else-if="data">
+    <h1>{{ data.title }}</h1>
+    <div>
+      <p>{{ data.body }}</p>
+    </div>
+    <div v-if="isFetching" class="update">Background Updating...</div>
+  </div>
+</template>
+
+<style scoped>
+.update {
+  font-weight: bold;
+  color: green;
+}
+</style>
diff --git a/examples/vue/persister/src/Posts.vue b/examples/vue/persister/src/Posts.vue
new file mode 100644
index 0000000000..fb21a55ed0
--- /dev/null
+++ b/examples/vue/persister/src/Posts.vue
@@ -0,0 +1,55 @@
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { useQuery } from '@tanstack/vue-query'
+
+import { Post } from './types'
+
+const fetcher = async (): Promise<Post[]> =>
+  await fetch('https://jsonplaceholder.typicode.com/posts').then((response) =>
+    response.json(),
+  )
+
+export default defineComponent({
+  name: 'PostsList',
+  props: {
+    isVisited: {
+      type: Function,
+      required: true,
+    },
+  },
+  emits: ['setPostId'],
+  setup() {
+    const { isLoading, isError, isFetching, data, error, refetch } = useQuery(
+      ['posts'],
+      fetcher,
+    )
+
+    return { isLoading, isError, isFetching, data, error, refetch }
+  },
+})
+</script>
+
+<template>
+  <h1>Posts</h1>
+  <div v-if="isLoading">Loading...</div>
+  <div v-else-if="isError">An error has occurred: {{ error }}</div>
+  <div v-else-if="data">
+    <ul>
+      <li v-for="item in data" :key="item.id">
+        <a
+          @click="$emit('setPostId', item.id)"
+          href="#"
+          :class="{ visited: isVisited(item.id) }"
+          >{{ item.title }}</a
+        >
+      </li>
+    </ul>
+  </div>
+</template>
+
+<style scoped>
+.visited {
+  font-weight: bold;
+  color: green;
+}
+</style>
diff --git a/examples/vue/persister/src/main.ts b/examples/vue/persister/src/main.ts
new file mode 100644
index 0000000000..61a93de4a0
--- /dev/null
+++ b/examples/vue/persister/src/main.ts
@@ -0,0 +1,25 @@
+import { createApp } from 'vue'
+import { VueQueryPlugin, type VueQueryPluginOptions } from '@tanstack/vue-query'
+import { persistQueryClient } from '@tanstack/query-persist-client-core'
+import { createSyncStoragePersister } from '@tanstack/query-sync-storage-persister'
+
+import App from './App.vue'
+
+const vueQueryOptions: VueQueryPluginOptions = {
+  queryClientConfig: {
+    defaultOptions: {
+      queries: {
+        cacheTime: 1000 * 60 * 60 * 24,
+        staleTime: 1000 * 60 * 60 * 24,
+      },
+    },
+  },
+  clientPersister: (queryClient) => {
+    return persistQueryClient({
+      queryClient,
+      persister: createSyncStoragePersister({ storage: localStorage }),
+    })
+  },
+}
+
+createApp(App).use(VueQueryPlugin, vueQueryOptions).mount('#app')
diff --git a/examples/vue/persister/src/shims-vue.d.ts b/examples/vue/persister/src/shims-vue.d.ts
new file mode 100644
index 0000000000..ac1ded7923
--- /dev/null
+++ b/examples/vue/persister/src/shims-vue.d.ts
@@ -0,0 +1,5 @@
+declare module '*.vue' {
+  import { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
diff --git a/examples/vue/persister/src/types.d.ts b/examples/vue/persister/src/types.d.ts
new file mode 100644
index 0000000000..4851e81022
--- /dev/null
+++ b/examples/vue/persister/src/types.d.ts
@@ -0,0 +1,6 @@
+export interface Post {
+  userId: number
+  id: number
+  title: string
+  body: string
+}
diff --git a/examples/vue/persister/tsconfig.json b/examples/vue/persister/tsconfig.json
new file mode 100644
index 0000000000..e754e65292
--- /dev/null
+++ b/examples/vue/persister/tsconfig.json
@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "strict": true,
+    "jsx": "preserve",
+    "sourceMap": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "lib": ["esnext", "dom"],
+    "types": ["vite/client"]
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
+}
diff --git a/examples/vue/persister/vite.config.ts b/examples/vue/persister/vite.config.ts
new file mode 100644
index 0000000000..bd15f23a1a
--- /dev/null
+++ b/examples/vue/persister/vite.config.ts
@@ -0,0 +1,10 @@
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [vue()],
+  optimizeDeps: {
+    exclude: ["vue-query", "vue-demi"],
+  },
+});
diff --git a/package.json b/package.json
index f73f5cb3c1..49627b8f0f 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,7 @@
     "typecheck": "tsc -b",
     "watch": "concurrently --kill-others \"rollup --config rollup.config.js -w\" \"pnpm run typecheck --watch\"",
     "dev": "pnpm run watch",
-    "prettier": "prettier \"packages/*/{src/**,examples/**/src/**}.{md,js,jsx,ts,tsx,json}\"",
+    "prettier": "prettier \"packages/*/{src/**,examples/**/src/**}.{md,js,jsx,ts,tsx,json,vue}\"",
     "prettier:write": "pnpm run prettier --write",
     "cipublish": "ts-node scripts/publish.ts"
   },
diff --git a/packages/vue-query/package.json b/packages/vue-query/package.json
index 81e67c352b..b8ad9010b9 100644
--- a/packages/vue-query/package.json
+++ b/packages/vue-query/package.json
@@ -4,7 +4,11 @@
   "description": "Hooks for managing, caching and syncing asynchronous and remote data in Vue",
   "author": "Damian Osipiuk",
   "license": "MIT",
-  "repository": "tanstack/query",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/TanStack/query.git",
+    "directory": "packages/vue-query"
+  },
   "homepage": "https://tanstack.com/query",
   "funding": {
     "type": "github",
diff --git a/packages/vue-query/src/__mocks__/useBaseQuery.ts b/packages/vue-query/src/__mocks__/useBaseQuery.ts
index 4072f1b692..d8f718d93e 100644
--- a/packages/vue-query/src/__mocks__/useBaseQuery.ts
+++ b/packages/vue-query/src/__mocks__/useBaseQuery.ts
@@ -1,3 +1,5 @@
-const { useBaseQuery: originImpl } = jest.requireActual('../useBaseQuery')
+const { useBaseQuery: originImpl, parseQueryArgs: originalParse } =
+  jest.requireActual('../useBaseQuery')
 
 export const useBaseQuery = jest.fn(originImpl)
+export const parseQueryArgs = originalParse
diff --git a/packages/vue-query/src/__tests__/useIsFetching.test.ts b/packages/vue-query/src/__tests__/useIsFetching.test.ts
index 8475c0ab92..d90be4cf62 100644
--- a/packages/vue-query/src/__tests__/useIsFetching.test.ts
+++ b/packages/vue-query/src/__tests__/useIsFetching.test.ts
@@ -1,4 +1,4 @@
-import { onScopeDispose, reactive } from 'vue-demi'
+import { onScopeDispose, reactive, ref } from 'vue-demi'
 
 import { flushPromises, simpleFetcher } from './test-utils'
 import { useQuery } from '../useQuery'
@@ -87,5 +87,15 @@ describe('useIsFetching', () => {
 
       expect(result).toEqual(expected)
     })
+
+    test('should unwrap refs arguments', () => {
+      const key = ref(['key'])
+      const filters = ref({ stale: ref(true) })
+
+      const result = parseFilterArgs(key, filters)
+      const expected = { queryKey: ['key'], stale: true }
+
+      expect(result).toEqual(expected)
+    })
   })
 })
diff --git a/packages/vue-query/src/__tests__/useIsMutating.test.ts b/packages/vue-query/src/__tests__/useIsMutating.test.ts
index 37091bb198..afc96654e2 100644
--- a/packages/vue-query/src/__tests__/useIsMutating.test.ts
+++ b/packages/vue-query/src/__tests__/useIsMutating.test.ts
@@ -1,8 +1,8 @@
-import { onScopeDispose, reactive } from 'vue-demi'
+import { onScopeDispose, reactive, ref } from 'vue-demi'
 
 import { flushPromises, successMutator } from './test-utils'
 import { useMutation } from '../useMutation'
-import { parseMutationFilterArgs, useIsMutating } from '../useIsMutating'
+import { parseFilterArgs, useIsMutating } from '../useIsMutating'
 import { useQueryClient } from '../useQueryClient'
 
 jest.mock('../useQueryClient')
@@ -80,7 +80,7 @@ describe('useIsMutating', () => {
 
   describe('parseMutationFilterArgs', () => {
     test('should default to empty filters', () => {
-      const result = parseMutationFilterArgs(undefined)
+      const result = parseFilterArgs(undefined)
 
       expect(result).toEqual({})
     })
@@ -88,10 +88,20 @@ describe('useIsMutating', () => {
     test('should merge mutation key with filters', () => {
       const filters = { fetching: true }
 
-      const result = parseMutationFilterArgs(['key'], filters)
+      const result = parseFilterArgs(['key'], filters)
       const expected = { ...filters, mutationKey: ['key'] }
 
       expect(result).toEqual(expected)
     })
+
+    test('should unwrap refs arguments', () => {
+      const key = ref(['key'])
+      const filters = ref({ fetching: ref(true) })
+
+      const result = parseFilterArgs(key, filters)
+      const expected = { mutationKey: ['key'], fetching: true }
+
+      expect(result).toEqual(expected)
+    })
   })
 })
diff --git a/packages/vue-query/src/__tests__/useMutation.test.ts b/packages/vue-query/src/__tests__/useMutation.test.ts
index 3c3b860664..67e4e85ab9 100644
--- a/packages/vue-query/src/__tests__/useMutation.test.ts
+++ b/packages/vue-query/src/__tests__/useMutation.test.ts
@@ -346,5 +346,20 @@ describe('useMutation', () => {
 
       expect(result).toEqual(expected)
     })
+
+    test('should unwrap refs arguments', () => {
+      const key = ref(['key'])
+      const mutationFn = ref(successMutator)
+      const options = ref({ retry: ref(12) })
+
+      const result = parseMutationArgs(key, mutationFn, options)
+      const expected = {
+        mutationKey: ['key'],
+        mutationFn: successMutator,
+        retry: 12,
+      }
+
+      expect(result).toEqual(expected)
+    })
   })
 })
diff --git a/packages/vue-query/src/__tests__/useQuery.test.ts b/packages/vue-query/src/__tests__/useQuery.test.ts
index b3d81c4fc6..7bb51a6600 100644
--- a/packages/vue-query/src/__tests__/useQuery.test.ts
+++ b/packages/vue-query/src/__tests__/useQuery.test.ts
@@ -14,7 +14,7 @@ import {
   getSimpleFetcherWithReturnData,
 } from './test-utils'
 import { useQuery } from '../useQuery'
-import { useBaseQuery } from '../useBaseQuery'
+import { parseQueryArgs, useBaseQuery } from '../useBaseQuery'
 
 jest.mock('../useQueryClient')
 jest.mock('../useBaseQuery')
@@ -233,6 +233,53 @@ describe('useQuery', () => {
     expect(status.value).toStrictEqual('loading')
   })
 
+  describe('parseQueryArgs', () => {
+    test('should unwrap refs arguments', () => {
+      const key = ref(['key'])
+      const fn = ref(simpleFetcher)
+      const options = ref({ enabled: ref(true) })
+
+      const result = parseQueryArgs(key, fn, options)
+      const expected = {
+        queryKey: ['key'],
+        queryFn: simpleFetcher,
+        enabled: true,
+      }
+
+      expect(result).toEqual(expected)
+    })
+
+    test('should unwrap refs with fn in options', () => {
+      const key = ref(['key'])
+      const fn = ref(simpleFetcher)
+      const options = ref({ queryFn: fn, enabled: ref(true) })
+
+      const result = parseQueryArgs(key, options)
+      const expected = {
+        queryKey: ['key'],
+        queryFn: simpleFetcher,
+        enabled: true,
+      }
+
+      expect(result).toEqual(expected)
+    })
+
+    test('should unwrap refs in options', () => {
+      const key = ref(['key'])
+      const fn = ref(simpleFetcher)
+      const options = ref({ queryKey: key, queryFn: fn, enabled: ref(true) })
+
+      const result = parseQueryArgs(options)
+      const expected = {
+        queryKey: ['key'],
+        queryFn: simpleFetcher,
+        enabled: true,
+      }
+
+      expect(result).toEqual(expected)
+    })
+  })
+
   describe('suspense', () => {
     test('should return a Promise', () => {
       const getCurrentInstanceSpy = getCurrentInstance as jest.Mock
diff --git a/packages/vue-query/src/__tests__/vueQueryPlugin.test.ts b/packages/vue-query/src/__tests__/vueQueryPlugin.test.ts
index c316e89546..0902778af4 100644
--- a/packages/vue-query/src/__tests__/vueQueryPlugin.test.ts
+++ b/packages/vue-query/src/__tests__/vueQueryPlugin.test.ts
@@ -1,12 +1,17 @@
 import type { App, ComponentOptions } from 'vue'
-import { isVue2, isVue3 } from 'vue-demi'
+import { isVue2, isVue3, ref } from 'vue-demi'
 
-import type { QueryClient } from '../queryClient'
+import { QueryClient } from '../queryClient'
 import { VueQueryPlugin } from '../vueQueryPlugin'
 import { VUE_QUERY_CLIENT } from '../utils'
 import { setupDevtools } from '../devtools/devtools'
+import { flushPromises } from './test-utils'
+import { useQuery } from '../useQuery'
+import { useQueries } from '../useQueries'
 
 jest.mock('../devtools/devtools')
+jest.mock('../useQueryClient')
+jest.mock('../useBaseQuery')
 
 interface TestApp extends App {
   onUnmount: Function
@@ -258,4 +263,122 @@ describe('VueQueryPlugin', () => {
       expect(customClient.mount).toHaveBeenCalledTimes(1)
     })
   })
+
+  describe('when persister is provided', () => {
+    test('should properly modify isRestoring flag on queryClient', async () => {
+      const appMock = getAppMock()
+      const customClient = {
+        mount: jest.fn(),
+        isRestoring: ref(false),
+      } as unknown as QueryClient
+
+      VueQueryPlugin.install(appMock, {
+        queryClient: customClient,
+        clientPersister: () => [
+          jest.fn(),
+          new Promise((resolve) => {
+            resolve()
+          }),
+        ],
+      })
+
+      expect(customClient.isRestoring.value).toBeTruthy()
+
+      await flushPromises()
+
+      expect(customClient.isRestoring.value).toBeFalsy()
+    })
+
+    test('should delay useQuery subscription and not call fetcher if data is not stale', async () => {
+      const appMock = getAppMock()
+      const customClient = new QueryClient({
+        defaultOptions: {
+          queries: {
+            staleTime: 1000 * 60 * 60,
+          },
+        },
+      })
+
+      VueQueryPlugin.install(appMock, {
+        queryClient: customClient,
+        clientPersister: (client) => [
+          jest.fn(),
+          new Promise((resolve) => {
+            setTimeout(() => {
+              client.setQueryData(['persist'], () => ({
+                foo: 'bar',
+              }))
+              resolve()
+            }, 0)
+          }),
+        ],
+      })
+
+      const fnSpy = jest.fn()
+
+      const query = useQuery(['persist'], fnSpy, {
+        queryClient: customClient,
+      })
+
+      expect(customClient.isRestoring.value).toBeTruthy()
+      expect(query.isFetching.value).toBeFalsy()
+      expect(query.data.value).toStrictEqual(undefined)
+      expect(fnSpy).toHaveBeenCalledTimes(0)
+
+      await flushPromises()
+
+      expect(customClient.isRestoring.value).toBeFalsy()
+      expect(query.data.value).toStrictEqual({ foo: 'bar' })
+      expect(fnSpy).toHaveBeenCalledTimes(0)
+    })
+
+    test('should delay useQueries subscription and not call fetcher if data is not stale', async () => {
+      const appMock = getAppMock()
+      const customClient = new QueryClient({
+        defaultOptions: {
+          queries: {
+            staleTime: 1000 * 60 * 60,
+          },
+        },
+      })
+
+      VueQueryPlugin.install(appMock, {
+        queryClient: customClient,
+        clientPersister: (client) => [
+          jest.fn(),
+          new Promise((resolve) => {
+            setTimeout(() => {
+              client.setQueryData(['persist'], () => ({
+                foo: 'bar',
+              }))
+              resolve()
+            }, 0)
+          }),
+        ],
+      })
+
+      const fnSpy = jest.fn()
+
+      const queries = useQueries({
+        queries: [
+          {
+            queryKey: ['persist'],
+            queryFn: fnSpy,
+            queryClient: customClient,
+          },
+        ],
+      })
+
+      expect(customClient.isRestoring.value).toBeTruthy()
+      expect(queries[0].isFetching).toBeFalsy()
+      expect(queries[0].data).toStrictEqual(undefined)
+      expect(fnSpy).toHaveBeenCalledTimes(0)
+
+      await flushPromises()
+
+      expect(customClient.isRestoring.value).toBeFalsy()
+      expect(queries[0].data).toStrictEqual({ foo: 'bar' })
+      expect(fnSpy).toHaveBeenCalledTimes(0)
+    })
+  })
 })
diff --git a/packages/vue-query/src/devtools/devtools.ts b/packages/vue-query/src/devtools/devtools.ts
index fce4bfcdf0..4b59a58279 100644
--- a/packages/vue-query/src/devtools/devtools.ts
+++ b/packages/vue-query/src/devtools/devtools.ts
@@ -21,7 +21,7 @@ export function setupDevtools(app: any, queryClient: QueryClient) {
       id: pluginId,
       label: pluginName,
       packageName: 'vue-query',
-      homepage: 'https://github.com/DamianOsipiuk/vue-query',
+      homepage: 'https://tanstack.com/query/v4',
       logo: 'https://vue-query.vercel.app/vue-query.svg',
       app,
       settings: {
diff --git a/packages/vue-query/src/queryClient.ts b/packages/vue-query/src/queryClient.ts
index 27d1d073f5..91f7b9c3ee 100644
--- a/packages/vue-query/src/queryClient.ts
+++ b/packages/vue-query/src/queryClient.ts
@@ -1,3 +1,4 @@
+import { ref } from 'vue-demi'
 import { QueryClient as QC } from '@tanstack/query-core'
 import type {
   QueryKey,
@@ -40,6 +41,8 @@ export class QueryClient extends QC {
     super(vueQueryConfig)
   }
 
+  isRestoring = ref(false)
+
   isFetching(filters?: MaybeRefDeep<QueryFilters>): number
   isFetching(
     queryKey?: MaybeRefDeep<QueryKey>,
diff --git a/packages/vue-query/src/useBaseQuery.ts b/packages/vue-query/src/useBaseQuery.ts
index 951bbb0c3c..66e8e74960 100644
--- a/packages/vue-query/src/useBaseQuery.ts
+++ b/packages/vue-query/src/useBaseQuery.ts
@@ -1,4 +1,13 @@
-import { onScopeDispose, toRefs, readonly, reactive, watch } from 'vue-demi'
+import {
+  onScopeDispose,
+  toRefs,
+  readonly,
+  reactive,
+  watch,
+  ref,
+  computed,
+  isRef,
+} from 'vue-demi'
 import type { ToRefs, UnwrapRef } from 'vue-demi'
 import type {
   QueryObserver,
@@ -9,7 +18,7 @@ import type {
 } from '@tanstack/query-core'
 import { useQueryClient } from './useQueryClient'
 import { updateState, isQueryKey, cloneDeepUnref } from './utils'
-import type { WithQueryClientKey } from './types'
+import type { MaybeRef, WithQueryClientKey } from './types'
 import type { UseQueryOptions } from './useQuery'
 import type { UseInfiniteQueryOptions } from './useInfiniteQuery'
 
@@ -34,7 +43,6 @@ export function useBaseQuery<
   TQueryFnData,
   TError,
   TData,
-  TQueryData,
   TQueryKey extends QueryKey,
 >(
   Observer: typeof QueryObserver,
@@ -46,41 +54,69 @@ export function useBaseQuery<
     | UseQueryOptionsGeneric<TQueryFnData, TError, TData, TQueryKey> = {},
   arg3: UseQueryOptionsGeneric<TQueryFnData, TError, TData, TQueryKey> = {},
 ): UseQueryReturnType<TData, TError> {
-  const options = getQueryUnreffedOptions()
+  const options = computed(() => parseQueryArgs(arg1, arg2, arg3))
+
   const queryClient =
-    options.queryClient ?? useQueryClient(options.queryClientKey)
-  const defaultedOptions = queryClient.defaultQueryOptions(options)
-  const observer = new Observer(queryClient, defaultedOptions)
+    options.value.queryClient ?? useQueryClient(options.value.queryClientKey)
+
+  const defaultedOptions = computed(() => {
+    const defaulted = queryClient.defaultQueryOptions(options.value)
+    defaulted._optimisticResults = queryClient.isRestoring.value
+      ? 'isRestoring'
+      : 'optimistic'
+
+    return defaulted
+  })
+
+  const observer = new Observer(queryClient, defaultedOptions.value)
   const state = reactive(observer.getCurrentResult())
-  const unsubscribe = observer.subscribe((result) => {
-    updateState(state, result)
+
+  const unsubscribe = ref(() => {
+    // noop
   })
 
   watch(
-    [() => arg1, () => arg2, () => arg3],
+    queryClient.isRestoring,
+    (isRestoring) => {
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+      if (!isRestoring) {
+        unsubscribe.value()
+        unsubscribe.value = observer.subscribe((result) => {
+          updateState(state, result)
+        })
+      }
+    },
+    { immediate: true },
+  )
+
+  watch(
+    defaultedOptions,
     () => {
-      observer.setOptions(
-        queryClient.defaultQueryOptions(getQueryUnreffedOptions()),
-      )
+      observer.setOptions(defaultedOptions.value)
+      updateState(state, observer.getCurrentResult())
     },
     { deep: true },
   )
 
   onScopeDispose(() => {
-    unsubscribe()
+    unsubscribe.value()
   })
 
   const suspense = () => {
     return new Promise<QueryObserverResult<TData, TError>>((resolve) => {
+      let stopWatch = () => {
+        //noop
+      }
       const run = () => {
-        const newOptions = queryClient.defaultQueryOptions(
-          getQueryUnreffedOptions(),
-        )
-        if (newOptions.enabled !== false) {
-          const optimisticResult = observer.getOptimisticResult(newOptions)
+        if (defaultedOptions.value.enabled !== false) {
+          const optimisticResult = observer.getOptimisticResult(
+            defaultedOptions.value,
+          )
           if (optimisticResult.isStale) {
-            resolve(observer.fetchOptimistic(defaultedOptions))
+            stopWatch()
+            resolve(observer.fetchOptimistic(defaultedOptions.value))
           } else {
+            stopWatch()
             resolve(optimisticResult)
           }
         }
@@ -88,7 +124,7 @@ export function useBaseQuery<
 
       run()
 
-      watch([() => arg1, () => arg2, () => arg3], run, { deep: true })
+      stopWatch = watch(defaultedOptions, run, { deep: true })
     })
   }
 
@@ -96,27 +132,44 @@ export function useBaseQuery<
     ...(toRefs(readonly(state)) as UseQueryReturnType<TData, TError>),
     suspense,
   }
+}
+
+export function parseQueryArgs<
+  TQueryFnData = unknown,
+  TError = unknown,
+  TData = TQueryFnData,
+  TQueryData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey,
+>(
+  arg1:
+    | MaybeRef<TQueryKey>
+    | MaybeRef<UseQueryOptionsGeneric<TQueryFnData, TError, TData, TQueryKey>>,
+  arg2:
+    | MaybeRef<QueryFunction<TQueryFnData, UnwrapRef<TQueryKey>>>
+    | MaybeRef<
+        UseQueryOptionsGeneric<TQueryFnData, TError, TData, TQueryKey>
+      > = {},
+  arg3: MaybeRef<
+    UseQueryOptionsGeneric<TQueryFnData, TError, TData, TQueryKey>
+  > = {},
+): WithQueryClientKey<
+  QueryObserverOptions<TQueryFnData, TError, TData, TQueryData, TQueryKey>
+> {
+  const plainArg1 = isRef(arg1) ? arg1.value : arg1
+  const plainArg2 = isRef(arg2) ? arg2.value : arg2
+  const plainArg3 = isRef(arg3) ? arg3.value : arg3
 
-  /**
-   * Get Query Options object
-   * All inner refs unwrapped. No Reactivity
-   */
-  function getQueryUnreffedOptions() {
-    let mergedOptions
-
-    if (!isQueryKey(arg1)) {
-      // `useQuery(optionsObj)`
-      mergedOptions = arg1
-    } else if (typeof arg2 === 'function') {
-      // `useQuery(queryKey, queryFn, optionsObj?)`
-      mergedOptions = { ...arg3, queryKey: arg1, queryFn: arg2 }
-    } else {
-      // `useQuery(queryKey, optionsObj?)`
-      mergedOptions = { ...arg2, queryKey: arg1 }
-    }
-
-    return cloneDeepUnref(mergedOptions) as WithQueryClientKey<
-      QueryObserverOptions<TQueryFnData, TError, TData, TQueryData, TQueryKey>
-    >
+  let options = plainArg1
+
+  if (!isQueryKey(plainArg1)) {
+    options = plainArg1
+  } else if (typeof plainArg2 === 'function') {
+    options = { ...plainArg3, queryKey: plainArg1, queryFn: plainArg2 }
+  } else {
+    options = { ...plainArg2, queryKey: plainArg1 }
   }
+
+  return cloneDeepUnref(options) as WithQueryClientKey<
+    QueryObserverOptions<TQueryFnData, TError, TData, TQueryData, TQueryKey>
+  >
 }
diff --git a/packages/vue-query/src/useIsFetching.ts b/packages/vue-query/src/useIsFetching.ts
index f854eb608e..3df3f366b9 100644
--- a/packages/vue-query/src/useIsFetching.ts
+++ b/packages/vue-query/src/useIsFetching.ts
@@ -1,23 +1,23 @@
-import { onScopeDispose, ref, watch } from 'vue-demi'
+import { computed, isRef, onScopeDispose, ref, watch } from 'vue-demi'
 import type { Ref } from 'vue-demi'
 import type { QueryKey, QueryFilters as QF } from '@tanstack/query-core'
 
 import { useQueryClient } from './useQueryClient'
 import { cloneDeepUnref, isQueryKey } from './utils'
-import type { MaybeRefDeep, WithQueryClientKey } from './types'
+import type { MaybeRef, MaybeRefDeep, WithQueryClientKey } from './types'
 
 export type QueryFilters = MaybeRefDeep<WithQueryClientKey<QF>>
 
 export function useIsFetching(filters?: QueryFilters): Ref<number>
 export function useIsFetching(
-  queryKey?: QueryKey,
-  filters?: QueryFilters,
+  queryKey?: MaybeRef<QueryKey>,
+  filters?: Omit<QueryFilters, 'queryKey'>,
 ): Ref<number>
 export function useIsFetching(
-  arg1?: QueryKey | QueryFilters,
-  arg2?: QueryFilters,
+  arg1?: MaybeRef<QueryKey> | QueryFilters,
+  arg2?: Omit<QueryFilters, 'queryKey'>,
 ): Ref<number> {
-  const filters = ref(parseFilterArgs(arg1, arg2))
+  const filters = computed(() => parseFilterArgs(arg1, arg2))
   const queryClient =
     filters.value.queryClient ?? useQueryClient(filters.value.queryClientKey)
 
@@ -28,9 +28,8 @@ export function useIsFetching(
   })
 
   watch(
-    [() => arg1, () => arg2],
+    filters,
     () => {
-      filters.value = parseFilterArgs(arg1, arg2)
       isFetching.value = queryClient.isFetching(filters)
     },
     { deep: true },
@@ -44,16 +43,19 @@ export function useIsFetching(
 }
 
 export function parseFilterArgs(
-  arg1?: QueryKey | QueryFilters,
+  arg1?: MaybeRef<QueryKey> | QueryFilters,
   arg2: QueryFilters = {},
 ) {
-  let options: QueryFilters
+  const plainArg1 = isRef(arg1) ? arg1.value : arg1
+  const plainArg2 = isRef(arg2) ? arg2.value : arg2
 
-  if (isQueryKey(arg1)) {
-    options = { ...arg2, queryKey: arg1 }
+  let options = plainArg1
+
+  if (isQueryKey(plainArg1)) {
+    options = { ...plainArg2, queryKey: plainArg1 }
   } else {
     // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-    options = arg1 || {}
+    options = plainArg1 || {}
   }
 
   return cloneDeepUnref(options) as WithQueryClientKey<QF>
diff --git a/packages/vue-query/src/useIsMutating.ts b/packages/vue-query/src/useIsMutating.ts
index 6bcf32b6ad..03b037df5d 100644
--- a/packages/vue-query/src/useIsMutating.ts
+++ b/packages/vue-query/src/useIsMutating.ts
@@ -1,23 +1,23 @@
-import { onScopeDispose, ref, watch } from 'vue-demi'
+import { computed, isRef, onScopeDispose, ref, watch } from 'vue-demi'
 import type { Ref } from 'vue-demi'
 import type { MutationKey, MutationFilters as MF } from '@tanstack/query-core'
 
 import { useQueryClient } from './useQueryClient'
 import { cloneDeepUnref, isQueryKey } from './utils'
-import type { MaybeRefDeep, WithQueryClientKey } from './types'
+import type { MaybeRef, MaybeRefDeep, WithQueryClientKey } from './types'
 
 export type MutationFilters = MaybeRefDeep<WithQueryClientKey<MF>>
 
 export function useIsMutating(filters?: MutationFilters): Ref<number>
 export function useIsMutating(
-  mutationKey?: MutationKey,
+  mutationKey?: MaybeRef<MutationKey>,
   filters?: Omit<MutationFilters, 'mutationKey'>,
 ): Ref<number>
 export function useIsMutating(
-  arg1?: MutationKey | MutationFilters,
+  arg1?: MaybeRef<MutationKey> | MutationFilters,
   arg2?: Omit<MutationFilters, 'mutationKey'>,
 ): Ref<number> {
-  const filters = ref(parseMutationFilterArgs(arg1, arg2))
+  const filters = computed(() => parseFilterArgs(arg1, arg2))
   const queryClient =
     filters.value.queryClient ?? useQueryClient(filters.value.queryClientKey)
 
@@ -28,9 +28,8 @@ export function useIsMutating(
   })
 
   watch(
-    [() => arg1, () => arg2],
+    filters,
     () => {
-      filters.value = parseMutationFilterArgs(arg1, arg2)
       isMutating.value = queryClient.isMutating(filters)
     },
     { deep: true },
@@ -43,17 +42,20 @@ export function useIsMutating(
   return isMutating
 }
 
-export function parseMutationFilterArgs(
-  arg1?: MutationKey | MutationFilters,
+export function parseFilterArgs(
+  arg1?: MaybeRef<MutationKey> | MutationFilters,
   arg2: MutationFilters = {},
 ) {
-  let options: MutationFilters
+  const plainArg1 = isRef(arg1) ? arg1.value : arg1
+  const plainArg2 = isRef(arg2) ? arg2.value : arg2
 
-  if (isQueryKey(arg1)) {
-    options = { ...arg2, mutationKey: arg1 }
+  let options = plainArg1
+
+  if (isQueryKey(plainArg1)) {
+    options = { ...plainArg2, mutationKey: plainArg1 }
   } else {
     // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-    options = arg1 || {}
+    options = plainArg1 || {}
   }
 
   return cloneDeepUnref(options) as WithQueryClientKey<MF>
diff --git a/packages/vue-query/src/useQueries.ts b/packages/vue-query/src/useQueries.ts
index 7311f61ac1..bfababaa3a 100644
--- a/packages/vue-query/src/useQueries.ts
+++ b/packages/vue-query/src/useQueries.ts
@@ -1,13 +1,21 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { QueriesObserver } from '@tanstack/query-core'
-import { onScopeDispose, reactive, readonly, watch } from 'vue-demi'
+import {
+  computed,
+  onScopeDispose,
+  reactive,
+  readonly,
+  ref,
+  watch,
+} from 'vue-demi'
 import type { Ref } from 'vue-demi'
 
 import type { QueryFunction, QueryObserverResult } from '@tanstack/query-core'
 
 import { useQueryClient } from './useQueryClient'
-import type { UseQueryOptions } from './useQuery'
 import { cloneDeepUnref } from './utils'
+import type { UseQueryOptions } from './useQuery'
+import type { QueryClient } from './queryClient'
 
 // Avoid TS depth-limit error in case of large array literal
 type MAXIMUM_DEPTH = 20
@@ -130,37 +138,63 @@ export function useQueries<T extends any[]>({
 }: {
   queries: Ref<UseQueriesOptionsArg<T>> | UseQueriesOptionsArg<T>
 }): Readonly<UseQueriesResults<T>> {
-  const unreffedQueries = cloneDeepUnref(queries) as UseQueriesOptionsArg<T>
+  const unreffedQueries = computed(
+    () => cloneDeepUnref(queries) as UseQueriesOptionsArg<T>,
+  )
 
-  const queryClientKey = unreffedQueries[0]?.queryClientKey
-  const optionsQueryClient = unreffedQueries[0]?.queryClient
+  const queryClientKey = unreffedQueries.value[0]?.queryClientKey
+  const optionsQueryClient = unreffedQueries.value[0]?.queryClient as
+    | QueryClient
+    | undefined
   const queryClient = optionsQueryClient ?? useQueryClient(queryClientKey)
-  const defaultedQueries = unreffedQueries.map((options) => {
-    return queryClient.defaultQueryOptions(options)
-  })
+  const defaultedQueries = computed(() =>
+    unreffedQueries.value.map((options) => {
+      const defaulted = queryClient.defaultQueryOptions(options)
+      defaulted._optimisticResults = queryClient.isRestoring.value
+        ? 'isRestoring'
+        : 'optimistic'
+
+      return defaulted
+    }),
+  )
 
-  const observer = new QueriesObserver(queryClient, defaultedQueries)
+  const observer = new QueriesObserver(queryClient, defaultedQueries.value)
   const state = reactive(observer.getCurrentResult())
 
-  const unsubscribe = observer.subscribe((result) => {
-    state.splice(0, state.length, ...result)
+  const unsubscribe = ref(() => {
+    // noop
   })
 
   watch(
-    () => queries,
+    queryClient.isRestoring,
+    (isRestoring) => {
+      if (!isRestoring) {
+        unsubscribe.value()
+        unsubscribe.value = observer.subscribe((result) => {
+          state.splice(0, result.length, ...result)
+        })
+        // Subscription would not fire for persisted results
+        state.splice(
+          0,
+          state.length,
+          ...observer.getOptimisticResult(defaultedQueries.value),
+        )
+      }
+    },
+    { immediate: true },
+  )
+
+  watch(
+    unreffedQueries,
     () => {
-      const defaulted = (
-        cloneDeepUnref(queries) as UseQueriesOptionsArg<T>
-      ).map((options) => {
-        return queryClient.defaultQueryOptions(options)
-      })
-      observer.setQueries(defaulted)
+      observer.setQueries(defaultedQueries.value)
+      state.splice(0, state.length, ...observer.getCurrentResult())
     },
     { deep: true },
   )
 
   onScopeDispose(() => {
-    unsubscribe()
+    unsubscribe.value()
   })
 
   return readonly(state) as UseQueriesResults<T>
diff --git a/packages/vue-query/src/vueQueryPlugin.ts b/packages/vue-query/src/vueQueryPlugin.ts
index 2333b04f02..5d5478791f 100644
--- a/packages/vue-query/src/vueQueryPlugin.ts
+++ b/packages/vue-query/src/vueQueryPlugin.ts
@@ -12,21 +12,20 @@ declare global {
   }
 }
 
-export interface AdditionalClient {
-  queryClient: QueryClient
-  queryClientKey: string
-}
+type ClientPersister = (client: QueryClient) => [() => void, Promise<void>]
 
-interface ConfigOptions {
-  queryClientConfig?: MaybeRefDeep<QueryClientConfig>
+interface CommonOptions {
   queryClientKey?: string
   contextSharing?: boolean
+  clientPersister?: ClientPersister
+}
+
+interface ConfigOptions extends CommonOptions {
+  queryClientConfig?: MaybeRefDeep<QueryClientConfig>
 }
 
-interface ClientOptions {
+interface ClientOptions extends CommonOptions {
   queryClient?: QueryClient
-  queryClientKey?: string
-  contextSharing?: boolean
 }
 
 export type VueQueryPluginOptions = ConfigOptions | ClientOptions
@@ -58,6 +57,18 @@ export const VueQueryPlugin = {
     }
 
     client.mount()
+    let persisterUnmount = () => {
+      // noop
+    }
+
+    if (options.clientPersister) {
+      client.isRestoring.value = true
+      const [unmount, promise] = options.clientPersister(client)
+      persisterUnmount = unmount
+      promise.then(() => {
+        client.isRestoring.value = false
+      })
+    }
 
     if (process.env.NODE_ENV !== 'production' && options.contextSharing) {
       client
@@ -69,6 +80,7 @@ export const VueQueryPlugin = {
 
     const cleanup = () => {
       client.unmount()
+      persisterUnmount()
     }
 
     if (app.onUnmount) {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 294efd9857..fa049fe18c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -657,6 +657,25 @@ importers:
       typescript: 4.8.4
       vite: 3.1.8
 
+  examples/vue/persister:
+    specifiers:
+      '@tanstack/query-persist-client-core': ^4.14.1
+      '@tanstack/query-sync-storage-persister': ^4.14.1
+      '@tanstack/vue-query': ^4.14.1
+      '@vitejs/plugin-vue': 3.2.0
+      typescript: 4.8.4
+      vite: 3.2.2
+      vue: 3.2.41
+    dependencies:
+      '@tanstack/query-persist-client-core': link:../../../packages/query-persist-client-core
+      '@tanstack/query-sync-storage-persister': link:../../../packages/query-sync-storage-persister
+      '@tanstack/vue-query': link:../../../packages/vue-query
+      vue: 3.2.41
+    devDependencies:
+      '@vitejs/plugin-vue': 3.2.0_vite@3.2.2+vue@3.2.41
+      typescript: 4.8.4
+      vite: 3.2.2
+
   packages/eslint-plugin-query:
     specifiers:
       '@typescript-eslint/eslint-plugin': ^5.41.0
@@ -6314,6 +6333,17 @@ packages:
       vue: 3.2.41
     dev: true
 
+  /@vitejs/plugin-vue/3.2.0_vite@3.2.2+vue@3.2.41:
+    resolution: {integrity: sha512-E0tnaL4fr+qkdCNxJ+Xd0yM31UwMkQje76fsDVBBUCoGOUPexu2VDUYHL8P4CwV+zMvWw6nlRw19OnRKmYAJpw==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    peerDependencies:
+      vite: ^3.0.0
+      vue: ^3.2.25
+    dependencies:
+      vite: 3.2.2
+      vue: 3.2.41
+    dev: true
+
   /@vue/compiler-core/3.2.37:
     resolution: {integrity: sha512-81KhEjo7YAOh0vQJoSmAD68wLfYqJvoiD4ulyedzF+OEk/bk6/hx3fTNVfuzugIIaTrOx4PGx6pAiBRe5e9Zmg==}
     dependencies:
@@ -14077,6 +14107,14 @@ packages:
       fsevents: 2.3.2
     dev: true
 
+  /rollup/2.79.1:
+    resolution: {integrity: sha512-uKxbd0IhMZOhjAiD5oAFp7BqvkA4Dv47qpOCtaNvng4HBwdbWtdOh8f5nZNuk2rp51PMGk3bzfWu5oayNEuYnw==}
+    engines: {node: '>=10.0.0'}
+    hasBin: true
+    optionalDependencies:
+      fsevents: 2.3.2
+    dev: true
+
   /rooks/6.4.3_biqbaboplfbrettd7655fr4n2y:
     resolution: {integrity: sha512-nHrCdzlU8EAoDo1sNzLLzOSVgqK4ypbhOpLmbsEI7b4xDOagsiePueYwVJizGE4l5qhOYY5x+8YuSYZDp+OMjw==}
     engines: {node: '>=v10.24.1'}
@@ -15597,6 +15635,36 @@ packages:
       fsevents: 2.3.2
     dev: true
 
+  /vite/3.2.2:
+    resolution: {integrity: sha512-pLrhatFFOWO9kS19bQ658CnRYzv0WLbsPih6R+iFeEEhDOuYgYCX2rztUViMz/uy/V8cLCJvLFeiOK7RJEzHcw==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    hasBin: true
+    peerDependencies:
+      less: '*'
+      sass: '*'
+      stylus: '*'
+      sugarss: '*'
+      terser: ^5.4.0
+    peerDependenciesMeta:
+      less:
+        optional: true
+      sass:
+        optional: true
+      stylus:
+        optional: true
+      sugarss:
+        optional: true
+      terser:
+        optional: true
+    dependencies:
+      esbuild: 0.15.9
+      postcss: 8.4.18
+      resolve: 1.22.1
+      rollup: 2.79.1
+    optionalDependencies:
+      fsevents: 2.3.2
+    dev: true
+
   /vlq/1.0.1:
     resolution: {integrity: sha512-gQpnTgkubC6hQgdIcRdYGDSDc+SaujOdyesZQMv6JlfQee/9Mp0Qhnys6WxDWvQnL5WZdT7o2Ul187aSt0Rq+w==}
     dev: false