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

* fix: register devtools on root only

* test: fix test

Author: DamianOsipiuk

src/vue/__tests__/vueQueryPlugin.test.ts

@@ -49,7 +49,7 @@ describe("VueQueryPlugin", () => {
       expect(setupDevtoolsMock).toHaveBeenCalledTimes(0);
     });
 
-    test("should setup devtools", () => {
+    testIf(isVue3)("should setup devtools", () => {
       const envCopy = process.env.NODE_ENV;
       process.env.NODE_ENV = "development";
       const setupDevtoolsMock = setupDevtools as jest.Mock;

src/vue/vueQueryPlugin.ts

@@ -82,8 +82,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
@@ -103,10 +101,9 @@ export const VueQueryPlugin = {
             additionalClient.queryClient.mount();
           });
 
-          if (!devtoolsRegistered) {
-            if (process.env.NODE_ENV === "development") {
+          if (process.env.NODE_ENV === "development") {
+            if (this === this.$root) {
               setupDevtools(this, client);
-              devtoolsRegistered = true;
             }
           }
         },
@@ -119,9 +116,9 @@ export const VueQueryPlugin = {
         app.provide(key, additionalClient.queryClient);
         additionalClient.queryClient.mount();
       });
-    }
-    if (process.env.NODE_ENV === "development") {
-      setupDevtools(app, client);
+      if (process.env.NODE_ENV === "development") {
+        setupDevtools(app, client);
+      }
     }
   },
 };