useQuery stops working when in a Store combined with Vue Router

[dtroyano86]

When using useQuery function outside of Setup, it stops returning results after navigating with Vue Router.

I set up a StackBlitz to demonstrate the behavior but I will also explain it here.

Given a store that looks like this example

const useContinentsStore = defineStore('continents', () => {
  provideApolloClient(apolloClient);
  const code = ref('AN');
  const { result, loading } = useQuery(
    SAMPLEQUERY,
    () => ({
      code: code.value,
    })
  );
  const setCode = (str: string) => {
    code.value = str;
  };

  return { result, setCode };
});

export default useContinentsStore;

And a Component like this

<script setup>
import { useQuery } from '@vue/apollo-composable';
import useContinentsStore from '../continentsStore';
import { storeToRefs } from 'pinia';

const continentsStore = useContinentsStore();
const { result, loading, error, code } = storeToRefs(continentsStore);
const { setCode } = continentsStore;
</script>
<template>
  <div>
    <div>Currently Selected Code: {{ code }}</div>
    <button @click="setCode('AN')">AN</button>
    <button @click="setCode('AF')">AF</button>
    <button @click="setCode('AS')">AS</button>
    <ul v-if="result">
      <li v-for="item in result.continents" :key="item.code">
        {{ item.name }} {{ item.code }}
      </li>
    </ul>
  </div>
</template>

Clicking the button to change the code works before you navigate through Vue Router. However, once you go away and come back the code continues to change correctly, but the result stops updating.

In my actual source code in this setup I provide a custom link to the Apollo Provider and it doesn't even get called.
No matter what I try, there aren't even any errors, it's as if Apollo just vanished.

Can anyone help me with this?