this.$watch in created hook sets active effect scope to null which causes subsequent onScopeDispose and watchEffect cleanup to fail #12631Description
Vue version
3.5.13
Link to minimal reproduction
Steps to reproduce
Click the playground link. Toggle "visible" and observe the logs. "cleanup" and "scope dispose" will be logged correctly. Now enable "watch". This causes the component to call this.$watch first thing in its created hook. Now toggle visible again and notice that "cleanup" and "scope dispose" aren't logged. Also Vue warns about there not being an active effect scope.
What is expected?
Showing the component logs "effect".
Destroying the component logs "cleanup", "scope dispose" then "unmounted".
What is actually happening?
Showing the component logs "effect".
Destroying the component logs "unmounted".
System Info
System:
OS: macOS 15.2
CPU: (10) arm64 Apple M1 Max
Memory: 164.81 MB / 32.00 GB
Shell: 3.7.1 - /opt/homebrew/bin/fish
Binaries:
Node: 23.4.0 - /opt/homebrew/bin/node
Yarn: 1.22.22 - /opt/homebrew/bin/yarn
npm: 10.9.2 - /opt/homebrew/bin/npm
pnpm: 9.11.0 - /opt/homebrew/bin/pnpm
bun: 1.1.38 - /opt/homebrew/bin/bun
Browsers:
Brave Browser: 131.1.73.104
Chrome: 131.0.6778.205
Chrome Canary: 133.0.6928.0
Firefox Nightly: 135.0a1
Safari: 18.2
Safari Technology Preview: 18.2Any additional comments?
My understanding was that is was possible (and allowed?) to call lifecycle hooks in created and other composition API hooks. Regardless, it seems odd that calling this.$watch would mess up the active effect scope (activeEffectScope).