fix: populate payload state reactively in devtools (nuxt#643)

packages/devtools/client/components/StateEditor.vue

@@ -3,6 +3,7 @@ import JsonEditorVue from 'json-editor-vue'
 
 const props = defineProps<{
   name?: string
+  stateKey?: string
   open?: boolean
   state?: any
   readonly?: boolean
@@ -12,9 +13,11 @@ const emit = defineEmits<{
   (e: 'update:open', value: boolean): void
 }>()
 
+const client = useClient()
 const isOpen = useVModel(props, 'open', emit, { passive: true })
 const colorMode = useColorMode()
 const proxy = ref()
+const clientState = ref(client.value?.nuxt.payload.state)
 
 const state = useState(props.name)
 if (props.state)
@@ -25,8 +28,8 @@ else if (typeof props.state === 'number' || typeof props.state !== 'string')
 const watcher = watchPausable(
   proxy,
   (value) => {
-    if (typeof value !== 'number' && typeof value !== 'string')
-      deepSync(value, props.state)
+    if (typeof value !== 'number' && typeof value !== 'string' && props.stateKey)
+      deepSync(value, clientState.value[props.stateKey])
     else
       state.value = value
   },

packages/devtools/client/components/StateGroup.vue

@@ -16,6 +16,7 @@ withDefaults(
       <StateEditor
         v-for="value, key of state"
         :key="key"
+        :state-key="key"
         :state="value"
         :name="key.startsWith(prefix) ? key.slice(prefix.length) : key"
       >

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

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import type { NuxtPayload } from 'nuxt/app'
+
 definePageMeta({
   icon: 'carbon-data-set',
   title: 'Payload',
@@ -11,7 +13,7 @@ definePageMeta({
 })
 
 const client = useClient()
-const payload = computed(() => client.value?.nuxt.payload)
+const payload = computed<NuxtPayload>(() => JSON.parse(JSON.stringify(client.value?.nuxt.payload)))
 
 async function refreshData(keys?: string[]) {
   await client.value?.nuxt.hooks.callHookParallel('app:data:refresh', keys)