Vue2 Composition API Apollo client with id default not found

I have started having an issue with apollo client in vue2 when using inside a watch. I have followed the setup guide for apollo client when using the composition api:

https://v4.apollo.vuejs.org/guide-composable/setup.html#_2-connect-apollo-client-to-vue

so my main.ts looks like this:

import contentfulClient from "./plugins/vue-apollo-contentful";
import apiClient from "./plugins/vue-apollo-api";

Vue.config.productionTip = false;

Vue.use(VueApollo);

new Vue({
  router,
  store,
  vuetify,
  setup() {
    provide(ApolloClients, {
      default: apiClient,
      apiClient,
      contentfulClient,
    });
  },
  render: (h) => h(App),
}).$mount("#app");

The clients have their own files and are setup the same:

import { ApolloClient } from "apollo-client";
import { createHttpLink } from "apollo-link-http";
import { InMemoryCache } from "apollo-cache-inmemory";

const uri = `https://graphql.contentful.com/content/v1/spaces/${process.env.VUE_APP_CONTENTFUL_SPACE_ID}/environments/${process.env.VUE_APP_CONTENTFUL_ENV}?access_token=${process.env.VUE_APP_CONTENTFUL_ACCESS_TOKEN}`;
const link = createHttpLink({
  uri,
});
const cache = new InMemoryCache();

const contentfulClient = new ApolloClient({
  link,
  cache,
});

export default contentfulClient;

I have this component:

import { defineComponent, onMounted, ref, watch } from "@vue/composition-api";

import { useGetCategory } from "@/logic/get-category";

export default defineComponent({
  name: "Categories",
  setup(_, context) {
    const slug = ref(context.root.$route.params.slug);
    const result = ref({});

    const getCategory = (slug) => {
      console.log(slug);
      const { category, loading, error } = useGetCategory(slug);
      result.value = { category, loading, error };
    };

    watch(() => context.root.$route.params.slug, getCategory);
    onMounted(() => getCategory(slug.value));

    return { result };
  },
});

When this component loads, it "gets the category" by executing this:

import { useQuery, useResult } from "@vue/apollo-composable";
import * as getCategoryBySlug from "@/graphql/api/query.category.gql";

export function useGetCategory(slug: string) {
  const { result, loading, error } = useQuery(getCategoryBySlug, { slug });
  const category = useResult(result, null, (data) => data.getCategoryBySlug);
  return { category, loading, error };
}

When the page loads, it gets the category fine, but if I change the route parameter (slug) I expect it to get the new category and display it. But instead I get this error:

So I figured that the setup is wrong in main.ts, so I added the non-composition-api aswell, found here:

https://apollo.vuejs.org/guide/installation.html#_1-apollo-client

Now my main.ts looks like this:

import contentfulClient from "./plugins/vue-apollo-contentful";
import apiClient from "./plugins/vue-apollo-api";

Vue.config.productionTip = false;

const apolloProvider = new VueApollo({
  defaultClient: apiClient,
});

Vue.use(apolloProvider);

new Vue({
  router,
  store,
  vuetify,
  apolloProvider,
  setup() {
    provide(ApolloClients, {
      default: apiClient,
      apiClient,
      contentfulClient,
    });
  },
  render: (h) => h(App),
}).$mount("#app");

But this does not work. It compiles, but I still get the same error. Does anyone know what I need to do to get this to work?