попытка сделать нормальный интерцептор

api/queries/index.ts

@@ -1 +1 @@
-export * from './useGetProductList'
+export * from './useGetProductsDetail'

api/queries/useGetProductList.ts

@@ -1,9 +0,0 @@
-import { useQuery } from '@tanstack/vue-query'
-import { getProductList } from '~/api/endpoints'
-
-export const useGetProductList = () => {
-  return useQuery({
-    queryKey: ['get-product-list'],
-    queryFn: () => getProductList(),
-  })
-}

api/queries/useGetProductsDetail.ts

@@ -0,0 +1,14 @@
+import { useQuery } from '@tanstack/vue-query'
+import { unref, watch } from 'vue'
+import { getProductsDetail } from '~/api/endpoints'
+
+export const useGetProductsDetail = (productId: MaybeRef<number>) => {
+  const q = useQuery({
+    queryKey: ['get-products-detail', unref(productId)],
+    queryFn: () => getProductsDetail(unref(productId)),
+  })
+
+  watch(() => productId, () => q.refetch())
+
+  return q
+}