fix(devtools): register devtools on root only (#214)

Author: DamianOsipiuk

src/vuejs/__tests__/vueQueryPlugin.test.ts

@@ -13,6 +13,7 @@ interface TestApp extends App {
   _unmount: Function;
   _mixin: ComponentOptions;
   _provided: Record<string, any>;
+  $root: TestApp;
 }
 
 const testIf = (condition: boolean) => (condition ? test : test.skip);
@@ -56,6 +57,7 @@ describe("VueQueryPlugin", () => {
       const appMock = getAppMock();
       VueQueryPlugin.install?.(appMock);
 
+      appMock.$root = appMock;
       appMock._mixin.beforeCreate?.call(appMock);
       process.env.NODE_ENV = envCopy;
 

src/vuejs/vueQueryPlugin.ts

@@ -77,8 +77,6 @@ export const VueQueryPlugin = {
 
     /* istanbul ignore next */
     if (isVue2) {
-      // Workaround for Vue2 calling mixin multiple times
-      let devtoolsRegistered = false;
       app.mixin({
         beforeCreate() {
           // HACK: taken from provide(): https://github.com/vuejs/composition-api/blob/master/src/apis/inject.ts#L30
@@ -92,10 +90,9 @@ export const VueQueryPlugin = {
 
           this._provided[clientKey] = client;
 
-          if (!devtoolsRegistered) {
-            if (process.env.NODE_ENV === "development") {
+          if (process.env.NODE_ENV === "development") {
+            if (this === this.$root) {
               setupDevtools(this, client);
-              devtoolsRegistered = true;
             }
           }
         },