From 892d167ff18447521a73ae4953c9dd438a4c142e Mon Sep 17 00:00:00 2001
From: wobsoriano <sorianorobertc@gmail.com>
Date: Sat, 27 May 2023 06:13:45 -0700
Subject: [PATCH] feat: pass input to watched sources if it's a ref

---
 playground/pages/reactive.vue | 4 +---
 src/client/index.ts           | 7 +++++--
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/playground/pages/reactive.vue b/playground/pages/reactive.vue
index fe4ab5d..6a2fffc 100644
--- a/playground/pages/reactive.vue
+++ b/playground/pages/reactive.vue
@@ -6,9 +6,7 @@ const id = ref(1)
 //   watch: [id]
 // })
 
-const { data: todo, pending, error, refresh } = await $client.todo.getTodo.useQuery(id, {
-  watch: [id],
-})
+const { data: todo, pending, error, refresh } = await $client.todo.getTodo.useQuery(id)
 </script>
 
 <template>
diff --git a/src/client/index.ts b/src/client/index.ts
index b4e0d3e..870e6dd 100644
--- a/src/client/index.ts
+++ b/src/client/index.ts
@@ -4,7 +4,7 @@ import { createFlatProxy, createRecursiveProxy } from '@trpc/server/shared'
 import { hash } from 'ohash'
 import { type DecoratedProcedureRecord } from './types'
 // @ts-expect-error: Nuxt auto-imports
-import { getCurrentInstance, onScopeDispose, useAsyncData, unref } from '#imports'
+import { getCurrentInstance, onScopeDispose, useAsyncData, unref, isRef } from '#imports'
 
 /**
  * Calculates the key used for `useAsyncData` call.
@@ -58,7 +58,10 @@ export function createNuxtProxyDecoration<TRouter extends AnyRouter> (name: stri
       return useAsyncData(queryKey, () => (client as any)[path].query(unref(input), {
         signal: controller?.signal,
         ...trpc
-      }), asyncDataOptions)
+      }), {
+        ...asyncDataOptions,
+        watch: isRef(input) ? [...(asyncDataOptions.watch || []), input] : asyncDataOptions.watch
+      })
     }
 
     return (client as any)[path][lastArg](...args)