vue/apollo-composable useQuery does not re-trigger from changes in variables ref, with Vue 2.7

[andrew-tyw]

Describe the bug On upgrading to Vue^2.7 and @vue/apollo-composable^4.0.0-alpha.19:

• The useQuery composable does not re-trigger on changes to the query variables argument, when the variables argument is a Ref a ComputedRef, or a function.
• The useQuery composable correctly re-triggers when using a reactive object.
• The query correctly fires the first time. The Ref/Computed values do correctly update, but the useQuery composable does not make a second request. There are no errors thrown.

To Reproduce Example with a computed ref:

<template>
   <div>
     <button @click='updateVar'>TEST</button>
     <div>{{ result }}</div>
  </div>
</template>

<script>
import { defineComponent, ref, computed } from 'vue';
import { useQuery } from '@vue/apollo-composable';
import { gql } from '@apollo/client/core';

export default({
   name: 'ExampleComponent',
   setup() {

      const myVar = ref(false);
      const updateVar = () => {
        myVar.value = true
      };

      const query = gql`
          query getFoo($myVar: Boolean) {
            getFoo(myVar: $myVar) {
              id
            }
          }
       `,
      const queryVariables = computed(() => ({
        myVar: myVar.value;
      });
      const { result } = useQuery(query, queryVariables);

     return {
        result,
        updateVar,
     }
   }
})



</script>

This also doesn't work when passing a variables function

    const myVar = ref(false)
    const updateVar = () => {
        myVar.value = true
     };
    const { result } = useQuery(
      query,
      () => ({
          myVar: myVar.value
      }),
    );

Using a reactive object DOES work:

    const queryVariables = reactive({
      myVar: false,
    });
    const updateVar = () => {
        queryVariables.myVar = true
    };
    const { result } = useQuery(
      query,
      queryVariables,
    );

Expected behavior The useQuery composable should trigger a second time when the queryVariables ref updates, or when a variables as a function is passed. These options are described in the docs https://v4.apollo.vuejs.org/guide-composable/query.html#variables

Versions vue: 2.7.8 vue-apollo: 3.1.0 @apollo/client: 3.6.9 @vue/apollo-composable: 4.0.0-alpha.19

[andrew-tyw]

Update on this: I've tried this same set of dependencies and same example in a fresh Vite app and it works fine. I have only seen this issue in an app that runs [email protected] with [email protected]