async setup() failing to inject villus after first await

Hello,

I have a simple situation when I want to prefetch data in a component, and then also allow mutation in that same component by executing a form. If I do async setup() and await useQuery(), then the following useMutation fails to recognize villus client.

export default {
   async setup() {
           
      const { data } = await useQuery(`...`);
     
      const { execute } = useMutation(`...`);

   }
};

The useMutation() produces: Uncaught (in promise) Error: Cannot detect villus Client, did you forget to call 'useClient'?

If I remove async/await it all works correctly. I’m assuming this is related to vue’s setup lifecycle, but I can’t figure it out from the docs - is this likely my error or a bug?

The intended use is with <suspense> one level above. I understand I could have a workaround in this component by using { isFetching } on the useQuery and show a fallback that way.

[staticglitch]

Yeah, looks like await breaks it, even if used on await console.log(1), but it all works if all inject’s happen before it. Seems like it’s also like that without suspense. A bit sketchy. It’s probably best to just use isFetching for now with local loading indicator.

[staticglitch]

For completeness sake in case anyone stumbles here… This is not a bug and inject simply doesn’t work after await, reference:

https://forum.vuejs.org/t/vue-3-inject-can-only-be-used-inside-setup-or-functional-components/108672/4