VueJS Apollo graphql store/cache data collision between queries - vue.js

Question

I have the following data flow scenario:
UI has 3 sections: Enrolled Services, Enrolling Services, and
Search Services
User will search for existing services (upon the User
entering searchServiceText, searchResultServices gets called)
The user selects a service from the search result and enrolls in a
service. If the User's enrollment not complete (ex: no payment, not
accepted, etc), UI will show the data in the Enrolling section.
Otherwise, it will be in the Enrolled section
I have the following queries:
enrolledServices: {
query: gql(listServices),
variables() {
let idFilter = this.idFilter(this.userData.enrolledServiceIds);
return {
filter: {
or: idFilter
}
};
},
update: data => {
return _.compact(data.listServices.items);
}
},
enrollingServices: {
query: gql(listServices),
variables() {
let idFilter = this.idFilter(this.userData.enrollingServiceIds);
return {
filter: {
or: idFilter
}
};
},
update: data => {
return _.compact(data.listServices.items);
}
},
searchResultServices: {
query: gql(listServices),
variables() {
console.log('before search - enrolledServices:', this.enrolledServices); //Data Collision!!
console.log('before search - enrollingServices:', this.enrollingServices);
return {
filter: {
or: [
{ name: { contains: this.searchServiceText } }
],
and: [
{ status: { eq: 'Active' } }
]
}
};
},
skip() {
return !this.searchServiceText;
},
update(data) {
return _.compact(data.listServices.items);
}
}
enrolledServices: and enrollingServices: gets called on page load, hence UI will have 2 sections for enrolled services and enrolling services.
searchResultServices: will not be called on page load because of skip() condition. It is gets called reactively when user enters value to searchServiceText field in the UI
Getting to my issue now:
On page load as expected Service_enrolled, Service_enrolling is shown in Enrolled, Enrolling sections respectively (see below).
Enrolled Section:
Service_enrolled
Enrolling Section:
Service_enrolling
If the user sets search word in searchServiceText and clicks search, Enrolled section shows Service_enrolling (see below). User is just searching at time and he/she has not acted on the search results as yet
Enrolled Section:
Service_enrolling (enrolled service replaced with enrolling
service)
Enrolling Section:
Service_enrolling
The expected behavior in step2: I should see step 1 behavior (Service_enrolled should be in Enrolled section, Service_enrolling should be in Enrolling section) because the user has not acted on search results as yet.
Not sure why in step 2 above, there is a data collision. I have console.log to print enrolled and enrolling list in the memory/cache before hitting the search query. It shows data collision right there before hitting the search query. so search query is not contributing to the issue and there are no traces of enrolledServices, enrollingServices query execution in step 2 above. I am not sure how enrolled and enrolling data gets messed up.
Note: both enrolledServices, enrollingServices has same search query except 'idFilter' data will be different as they have different service Ids. That means, as per my understanding cache key is unique for these two queries, right?
I am absolutely sure something is missing in my approach or code but not able to figure out. Any help is much appreciated and you will save a lot of time plus for others who may have a similar issue.