Data refs that start with "use" are not visible in Vue dev tools

[gogo-rulez]

Vue devtools version

6.4.5

Link to minimal reproduction

https://github.com/gogo-rulez/vue-devtools-bug

Steps to reproduce & screenshots

• npm install
• npm run dev
• open in browser
• open vue devtools
• the refs starting with "use" are not listed in the setup tab of App.vue

What is expected?

To see all of the refs defined in App.vue file

What is actually happening?

Only refs which do not start with "use" are visible in the devtools setup tab

System Info

System:
    OS: Windows 10 10.0.22000
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1185G7 @ 3.00GHz
    Memory: 1.90 GB / 15.73 GB
Binaries:
    Node: 16.15.0 - ~\nvm\nodejs\bin\node.EXE
    Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 8.19.2 - ~\nvm\nodejs\bin\npm.CMD
Browsers:
    Edge: Spartan (44.22000.120.0), Chromium (106.0.1370.47)
    Internet Explorer: 11.0.22000.120

Any additional comments?

We went on and downloaded the devtools source code to look for the cause.
The only thing that we could find is in this file
/packages/app-backend-vue3/src/components/data.ts
inside function processSetupState the startsWith method is used like so !key.startsWith('use)

this may or may not be the thing that is causing the problem

[Akryum]

useXXX is a convention for composables (Composition API functions), for example useMousePosition(). The devtools hides them because they are not supposed to be used outside of setup. It's probably a good idea to rename your ref to something else.

[jhuber-de]

So is this considered the expected behavior?

I'm asking because I just started to work on a large codebase which uses the term userXXXX fairly often, and after hours trying to figure out where half of my refs went found this issue. In the codebase a lot of the refs are missing in the devtools because they start with use. This makes it basically impossible to debug the application.

I would suggest implementing it so that it filters refs only if a capital letter follows the use, so that useMousePosition() is hidden but user is not.
But IMO even this implementation should still be something that can be toggled in the settings, as I personally would consider this a breaking change.

[adrianrudnik]

Just had the same, building a login form. username was not showing up, everything else did. Maybe throw a warning or a notice at least, or if possible, check if it's not a ref and hide it?

[txreplay]

I tried to implement a better check using regex. Still not perfect for things like username but will work with userName

https://github.com/vuejs/devtools/pull/1997

[BlazeBiz]

Wow. I've spent hours trying to understand what I'm doing wrong because some of my variables, for example userAccount, don't show up in the tools. This seems really sketchy to hide variables based on naming.