How do I get refs and computed vars to show up in Vue Devtools when using the Composition API and the Script Setup syntax?

Question

I have a number of variables in one of my components that would go in the data() function or computed: {} section when using Vue's Options API (which I'm more familiar with), but this component is using the Composition API and the <script setup> syntax, and I'm not seeing the variables show up in Vue Devtools, despite the fact that the props and refs are showing up.

What do I need to do to get these variables to show up in the Vue Devtools?

Answer 1

It turns out that this is a known bug with version 6.4.5 of the Vue Devtools for imported components that use the <script setup> syntax: https://github.com/vuejs/devtools/issues/1940

There is a PR to fix the issue here: https://github.com/vitejs/vite-plugin-vue/pull/81

Until that fix is available, the workaround is to use the defineComponent syntax for those imported components (assuming you can change their code).