Using vue-devtools with composition-api when returning a render function (e.g. JSX)

Question

Since switching to the composition-api and returning a render function (in my case constructed using JSX with TypeScript to allow typing support in the template), I've lost the ability for vue-devtools to inspect computed properties. This is because they are no longer directly exposed by the component (props are still available).

How can I get good TypeScript support in my templates, while retaining the ability for vue-devtools to inspect the computed properties?

Here is an example of using .vue files with the composition-api that was friendly towards vue-devtools, but had no TypeScript support in the template:

SomeComponent.vue

<template>
  <div>
    <ul>
      <li>{{ computedProperty }}</li>
    </ul>
  </div>
</template>

<script lang="ts">
  export default defineComponent({
    name: "SomeComponent",
    props: { 
      // ...
    },
    setup(props, ctx) {
      const computedProperty = computed(() => {
        // return ...some calc
      })
  
      return {
        computedProperty
      }
    }
  })
</script>

Here's an example using .tsx files that has proper TypeScript support in the template, but vue-devtools can no longer inspect the computedProperty directly:

SomeComponent.tsx

export default defineComponent({
    name: "SomeComponent",
    props: { 
      // ...
    },
    setup(props, ctx) {
      const computedProperty = computed(() => {
        // return ...some calc
      })
  
      return () => (
        <div>
          <ul>
            <li>{ computedProperty.value }</li>
          </ul>
        </div>
      )
    }
  })

How can I get the best of both worlds?

Answer 1

export default defineComponent({
    name: "SomeComponent",
    props: { 
      // ...
    },
    setup(props, ctx) {
      const computedProperty = computed(() => {
        // return ...some calc
      })

      return { computedProperty }
    },
    render() {
      return (
        <div>
          <ul>
            <li>{ this.computedProperty.value }</li>
          </ul>
        </div>
      )
    }
  })