fix: remove infinite loop from watchers (#643)

packages/devtools/client/pages/modules/payload.vue

@@ -1,5 +1,7 @@
 <!-- eslint-disable ts/no-use-before-define -->
 <script setup lang="ts">
+import type { NuxtPayload } from '#app'
+
 definePageMeta({
   icon: 'carbon-data-set',
   title: 'Payload',
@@ -13,24 +15,32 @@ definePageMeta({
 
 const client = useClient()
 
-const payload = ref(JSON.parse(JSON.stringify(client.value?.nuxt.payload)))
+const payload = ref<NuxtPayload>(JSON.parse(JSON.stringify(client.value?.nuxt.payload)))
+
+let sync = false
 
-const watcher1 = watchPausable(
+watch(
   payload,
   (newPayload) => {
-    watcher2.pause()
-    deepSync(newPayload.state, client.value?.nuxt.payload.state)
-    watcher2.resume()
+    if (sync) {
+      sync = false
+      return
+    }
+    deepSync(newPayload, client.value?.nuxt.payload)
+    sync = true
   },
   { deep: true },
 )
 
-const watcher2 = watchPausable(
+watch(
   () => client.value?.nuxt.payload,
   (newPayload) => {
-    watcher1.pause()
-    payload.value = JSON.parse(JSON.stringify(newPayload))
-    watcher1.resume()
+    if (sync) {
+      sync = false
+      return
+    }
+    deepSync(newPayload, payload.value)
+    sync = true
   },
   { deep: true },
 )