Setup sate don't appear in vue-dev-tool if setup returns render function
Author: vutran6853Created Oct 9, 2020Updated Jul 1, 2025
Labelsenhancementvue 3.x
Version
6.0.0-beta.2
Browser and OS info
Chrome 85
Steps to reproduce
- create vue project useing vue cli
- Pick Typescript, vue 3 preview.
- create component HelloWorld.tsx Code
import { defineComponent, reactive } from 'vue'
export default defineComponent({
name: 'HelloWorld',
setup() {
const state = reactive({
name: 'Foo bar'
})
// If I return this only. It will work and appear. But If return my state and jsx, it don't work.
// return {
// state
// }
return () => {
return (
<div>
<h1>{state.name}</h1>
</div>
)
}
}
})
What is expected?
setup should appear and have my state which is from my reactive.
What is actually happening?
setup don't appear in vue-dev-tool in Chrome.
if you return state. setup show up after refresh the page. But I need to return my jsx from my component. is there way to fix this issue? Also if you use .vue and flag lang="tsx" it same problem.
Source: vuejs/devtools-v6