In all of my components, I import state from './state' to have a global state I can access from there. It is not a state-of-the-art state machine because it does not have mutations etc. but it is perfect for my small case.
state is defined as a ref() variable and I would like to be able to peek at its value during debugging.
I expected it to show up in the Vue tab in Dev Tools but only variables defined in a particular component are shown, not the imported one.
How can I debug that global reactive variable? (short of displaying it somewhere on the page)
You might want to try Pinia. Pinia is the go-to store for Vue 3 projects. It is lightweight and also has no mutations. Though an extra library might seem like an overkill for your small use case, the debugging it offers might be a compelling argument on its own.
If, for some reason, you want to avoid Pinia, you can implement your state as a composable and then destructure the desired variable from your state in your component's script setup. Then it should be visible in Vue's Dev Tools.
const { myVariable } = useMyState()