[Vuejs]-Vue Apollo Composable useQuery Ignores Reactive Filter Variable Change Even Though It Triggers a Refetch

I resolved it, using this implementation:

// Reactive state to control pagination and filters
    const variables = reactive({
      pagination: {
        limit: 50,
        skip: 0
      },
      filters: {
        verified: {
          condition: 'EQUAL',
          value: true
        }
      }
    })


  const { result, error, loading, refetch } = useQuery(
      gql`
        query GetMatches(
          $pagination: PaginationInput
          $filters: matchFilterInput
        ) {
          getMatches(pagination: $pagination, filters: $filters) {
            _id
            category
           // rest of el being queried
          }
        }
      `,
      variables,
      {
        notifyOnNetworkStatusChange: true,
        fetchPolicy: 'cache-and-network'
      }
    )

Now it’s working as expected, if you wrap every variable in a reactive() you make sure that internal reactive props will change and in consequence useQuery will get triggered with new values.