Ever since I made the transition to utilizing the composition-api and incorporating a render function (primarily leveraging JSX with TypeScript for type safety within the template), I've encountered an issue where vue-devtools cannot inspect the computed properties. This limitation arises from these properties no longer being directly accessible by the component, despite props remaining accessible.
What strategies can I implement to ensure robust TypeScript support in my templates while also retaining the ability for vue-devtools to inspect computed properties?
For instance, consider this previous approach using .vue files implementing the composition-api which was vue-devtools-friendly but lacked 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>
Then, contrast it with this example utilizing .tsx files providing proper TypeScript support in the template, albeit at the cost of vue-devtools' inability to directly inspect computedProperty:
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 we bridge the gap and achieve the benefits of both approaches seamlessly?