Query is fired twice when changing both query and variables in ApolloQuery component

[Csszabi98]

Describe the bug When both the variables and the query are getting changed of an ApolloQuery component at the same time, the query gets fired twice.

To Reproduce

1. Download vue-apollo-component-query-fired-twice.zip
2. npm install
3. npm run dev
4. Observe the network tab

Expected behavior The query should only be fired once when changing both the query and the variables are getting changed at the same time.

Versions vue: 3.2.47 @vue/apollo-option: 4.0.0-beta.5 @vue/apollo-components: 4.0.0-beta.5 @apollo/client: 3.7.10

Possible workarounds: Set the query to be skipped before making the modifications, and set it to not be skipped after the next vue update:

// Set ref on ApolloQuery component in the template  
const apolloQuery = this.$refs.apolloQuery?.$apollo?.queries?.query

// Fixes an issue with apollo query executing twice
// when both the variables and the query changes.
if (apolloQuery) {
  apolloQuery.skip = true
  // Inside options api 
  this.$nextTick(() => {
    apolloQuery.skip = false  
  })
  // Or inside composition API
  // import { nextTick } from 'vue'
  // nextTick(() => {
  //   apolloQuery.skip = false
  // })
}
// Make query/variables updates