Can I use vue-query in a newly created vue instance through vue.extend?

[Jungho-Cheon]

Hello.
I wrote a modal component that renders through the vue.extend function in vue 2.7.
I initialized VuePlugin in the same way as global Vue, but it looks like I can't find the context. Is there a good way?

code

const MyComponentConstructor = Vue.extend(ModalComponent);
const vueQueryPluginOptions: VueQueryPluginOptions = {
	queryClientConfig: {
		defaultOptions: {
			queries: {
				refetchOnWindowFocus: false,
				retry: false,
			},
		},
	},
};

MyComponentConstructor.use(VueQueryPlugin, vueQueryPluginOptions);

modalComponent = new MyComponentConstructor();

const div = document.createElement('div');
div.id = 'global-modal';
document.body.appendChild(div);
modalComponent.$mount('#global-modal');

Result

[DamianOsipiuk]

To be honest i'm not familiar with how Vue.extend works under the hood.
You can always pass queryClient as an option to useQuery and other hooks if inject does not work properly.

[MohamedFiqow]

I don't know about your Vue architecture, but I am currently working on a manual for working with Vue in AEM.