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

  1. create vue project useing vue cli
  • Pick Typescript, vue 3 preview.
  1. create component HelloWorld.tsx Code
bash
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.