Description
When returning a render function from setup(), usually all component state will be held in local ref/reactive variables inside the setup function. The problem is that these variables are inaccessible in the Vue.js devtools. e.g. there's no easy way to inspect the contents of state.counter in the following:
export const MyComponent = defineComponent({
setup() {
const state = reactive({
counter: 0
})
return () => (
<button onClick={() => {state.counter += 1}}>
{state.counter < 5 ? 'Click me' : 'BOOM'}
</button>
)
},
})With all other patterns, devtools would be able to access the variables at runtime in the component's $data. However, not only are the ref/reactive variables not registered against the component, data() occurs after setup() in the lifecycle, so there's no hacky workaround like doing this.$data.state = state in setup(). The only quick way to view these variables is to do watch(() => console.log(state)), but this can be extremely spammy, and is hard to read if there are multiple instances of the component.
Am I missing any other solutions? Are there any plans to make these hidden state containers accessible in devtools? I doubt it's possible to save variable names, but it seems like it should be possible for ref()/reactive() to call getCurrentInstance() and somehow associate the returned observable with the component...