Updating the `variables` ref does not work when using the function form

[yusufkandemir]

Describe the bug useLazyQuery's load doesn't respect the variables given through its 2nd parameter. After some investigation, I've found out it manipulates variables from the useQuery/useLazyQuery's return value. Updating the variables like variables.value = { ... } won't do anything, which is not specific to load. This only happens when the variables parameter is given to useQuery/useLazyQuery is in function form. It works fine when a ref is given.

To Reproduce Does NOT work ❌:

const { variables } = useQuery(SomeDocument, () => ({ test: 1 }))

variables.value = { test: 2 } // won't trigger a new call

Does work ✅:

const { variables } = useQuery(SomeDocument, ref({ test: 1 }))

variables.value = { test: 2 } // will trigger a new call as expected

Does NOT work ❌:

const { load } = useLazyQuery(SomeDocument, () => ({ test: 1 }))

load(undefined, { test: 2 }) // will still call the query with { test: 1 }

Does work ✅:

const { load } = useQuery(SomeDocument, ref({ test: 1 }))

load(undefined, { test: 2 }) // will trigger the query with { test: 2 } as expected

Expected behavior Using the function form should work the same as passing a ref/reactive. Or at least, this limitation should be documented.

Versions vue: 3.4.19 vue-apollo: 4.0.1 @apollo/client: 3.9.4