fix: using toRefs to reference payload state nested objects to popula…

…te useState reactively (#643)

packages/devtools/client/components/StateEditor.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import JsonEditorVue from 'json-editor-vue'
+import type { ToRef } from 'vue'
 
 const props = defineProps<{
   name?: string
   open?: boolean
-  state?: any
+  state?: ToRef<any>
   readonly?: boolean
 }>()
 
@@ -17,16 +18,16 @@ const colorMode = useColorMode()
 const proxy = ref()
 
 const state = useState(props.name)
-if (props.state)
-  proxy.value = JSON.parse(JSON.stringify(props.state))
-else if (typeof props.state === 'number' || typeof props.state !== 'string')
-  proxy.value = props.state
+if (props.state?.value)
+  proxy.value = JSON.parse(JSON.stringify(props.state.value))
+else if (typeof props.state?.value === 'number' || typeof props.state?.value !== 'string')
+  proxy.value = props.state?.value
 
 const watcher = watchPausable(
   proxy,
   (value) => {
     if (typeof value !== 'number' && typeof value !== 'string')
-      deepSync(value, props.state)
+      deepSync(value, props.state?.value)
     else
       state.value = value
   },
@@ -48,7 +49,7 @@ function deepSync(from: any, to: any) {
 
 async function refresh() {
   watcher.pause()
-  proxy.value = JSON.parse(JSON.stringify(props.state))
+  proxy.value = JSON.parse(JSON.stringify(props.state?.value))
   await nextTick()
   watcher.resume()
 }

packages/devtools/client/components/StateGroup.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
-withDefaults(
+import type { ToRefs } from 'vue'
+
+const props = withDefaults(
   defineProps<{
     state?: Record<string, any>
     prefix?: string
@@ -8,13 +10,17 @@ withDefaults(
     prefix: '',
   },
 )
+
+let stateRefs: ToRefs<typeof props.state>
+if (props.state)
+  stateRefs = toRefs(props.state)
 </script>
 
 <template>
   <div>
-    <div v-if="state && Object.keys(state).length > 0" flex="~ col gap-1">
+    <div v-if="stateRefs && state && Object.keys(state).length > 0" flex="~ col gap-1">
       <StateEditor
-        v-for="value, key of state"
+        v-for="(value, key) of stateRefs"
         :key="key"
         :state="value"
         :name="key.startsWith(prefix) ? key.slice(prefix.length) : key"

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

@@ -66,7 +66,7 @@ async function refreshData(keys?: string[]) {
     >
       <StateEditor
         ml--6
-        :state="payload.functions"
+        :state="toRef(payload.functions)"
       />
     </NSectionBlock>
   </div>