Vue Apollo Composable useQuery Ignores Reactive Filter Variable Change Even Though It Triggers a Refetch

I am using Vue Apollo Composable with useQuery to perform a GraphQL query. My pagination works as expected; however, I am facing an issue with my filters.verified variable. Although I see the variable toggling in the client-side (I’m logging it), the network request still shows the initial value as true.

Problem:

When I click on the "RPRs" button, a fetch should be triggered with filters.verified = false. Even though I am printing the value in the console prior to the API response and it shows false, the network tab still shows true as the value.

Relevant code:

// reactive state to control pagination
const state = reactive({
  pagination: {
    limit: 50,
    skip: 0
  }
});

// reactie state to control filters.verfied value: Boolean
const filters = reactive({
  verified: true
});

const { result, error, loading } = useQuery(
  gql`
    query GetMatches($pagination: PaginationInput, $filters: matchFilterInput) {
      // ...mi consulthere
    }
  `,
     {
       pagination: state.pagination,
        filters: {
          verified: {
            condition: 'EQUAL',
            value: filters.verified
          }
        }
      },
  {
    fetchPolicy: 'cache-and-network'
  }
);


// prev and next page - pagination logic
const prevPage = () => {
  if (state.pagination.skip > 0) {
    state.pagination.skip -= 50;
  }
};

const nextPage = () => {
  // ... (logging and pagination logic)
};

// filter buttons logic
const handleRPR = (event?: MouseEvent) => {
  if (filters.verified === false) filters.verified = true;
  // ... (other logic)
};

const handleRPRs = (event?: MouseEvent) => {
  if (filters.verified === true) filters.verified = false;
  // ... (other logic)
};

// ... (Vue watches)

What I’ve Tried:

I’ve used the following code to manually refetch when I click the "RPRs" button:

const handleRPRs = (event?: MouseEvent) => {
      if (filters.verified === true) filters.verified = false
      activeButton.value = 'RPR-s'
      refetch({
        pagination: state.pagination,
        filters: { verified: { condition: 'EQUAL', value: filters.verified } }
      })
    }

his works fine for the first fetch but then disrupts the functioning of prevPage and nextPage. In fact, if you press prevPage, it will bring you back to the initial query with verified: true. It’s as if adding a separate stack independent of the context, which individually works fine but completely loses the general structure.

Question:

As far as I understand, useQuery is reactive to changes in its props. That’s why, if I remove the filters, prevPage and nextPage work fine. Just changing the skip value is enough to trigger a refetch. On the other hand, when I press handleRPRs, which changes the value of verified to false, an automatic refetch is executed, so the query registers an internal change. However, in the network tab, I still see:

{
  "variables": {
    "pagination": { "limit": 50, "skip": 0 },
    "filters": { "verified": { "condition": "EQUAL", "value": true } }
  }
}

Is there something specific I am overlooking? Can you see why the request is never made with value: false, even though I see the value changing to false in the console? Could it be an issue with the order of execution? Is the request made before changing the value?

I can’t seem to pinpoint the error or manipulate the issue much. Any help is appreciated, thank you.