Vue Composables Can Silently Share State Across Components Due to JS Scoping

A common but subtle bug in Vue's Composition API causes composables to share state across multiple component instances when reactive variables are declared at module scope rather than inside the function body. Because ES modules are initialized once per import, any ref or reactive value placed outside the exported function becomes a singleton shared by every caller. This means two components using the same composable can inadvertently read and mutate each other's data without any warning from Vue. The fix is straightforward: declaring state inside the exported function ensures each component call creates its own independent closure. Developers building server-rendered Vue apps face greater risk, as shared module-level state can leak data between different users' requests.