docs(examples): update queryKey to be reactive in vue files (#9807)

docs(examples): update queryKey to have reactivity in vue files

Author: itamarzwi

examples/vue/2.6-basic/src/Post.vue

@@ -20,7 +20,7 @@ export default defineComponent({
   emits: ['setPostId'],
   setup(props) {
     const { isPending, isError, isFetching, data, error } = useQuery({
-      queryKey: ['post', props.postId],
+      queryKey: ['post', () => props.postId],
       queryFn: () => fetcher(props.postId),
     })
 

examples/vue/2.7-basic/src/Post.vue

@@ -20,7 +20,7 @@ export default defineComponent({
   emits: ['setPostId'],
   setup(props) {
     const { isPending, isError, isFetching, data, error } = useQuery({
-      queryKey: ['post', props.postId],
+      queryKey: ['post', () => props.postId],
       queryFn: () => fetcher(props.postId),
     })
 

examples/vue/basic/src/Post.vue

@@ -20,7 +20,7 @@ export default defineComponent({
   emits: ['setPostId'],
   setup(props) {
     const { isPending, isError, isFetching, data, error } = useQuery({
-      queryKey: ['post', props.postId],
+      queryKey: ['post', () => props.postId],
       queryFn: () => fetcher(props.postId),
     })
 

examples/vue/dependent-queries/src/Post.vue

@@ -31,7 +31,7 @@ export default defineComponent({
       data: post,
       error,
     } = useQuery({
-      queryKey: ['post', props.postId],
+      queryKey: ['post', () => props.postId],
       queryFn: () => fetchPost(props.postId),
     })
 

examples/vue/persister/src/Post.vue

@@ -22,7 +22,7 @@ export default defineComponent({
   emits: ['setPostId'],
   setup(props) {
     const { isPending, isError, isFetching, data, error } = useQuery({
-      queryKey: ['post', props.postId] as const,
+      queryKey: ['post', () => props.postId] as const,
       queryFn: () => fetcher(props.postId),
       persister: experimental_createQueryPersister({
         storage: {