Calling this.$watch in created hook sets active effect scope to null which causes subsequent onScopeDispose and watchEffect cleanup to fail

[decademoon]

Vue version

3.5.13

Link to minimal reproduction

https://play.vuejs.org/#eNqdVE1v2zAM/SuEMcAp0MYYtlPmBti6HLbDNqzdad7BkelErSJp+nAzBPnvoyQ7cbOsh94kPvLx8Yn2Lnuv9bTzmM2y0jLDtQOLzut5JflGK+NgBwZb2ENr1AZySs3fHbAbtdE9MC3CJVAFvJJMSevgsXZsDdeBYtLWwuIFgQnquOVLgadgWSQZJIAuDjda1A7pBlA2vJuXol6imJdcau/A/dF4XWVsjexhqbZVBt3VRjUoKBh7V9k8iSiLvrAILC+g6/UGwv74L2WkjaZ0V7wdF8EsqjjKKqigLEbzZZeZs2RNy1fTe6skvcgucmaMCLlA81U7TtZV2QwiErBaCPX4Ocac8Xg5xOMIZ+L3lqaa0eGbQYumI2kHzNVmhS7Bi9svuKXzASQbfBjkGfA7WiV80JjSPnjZkOxRXlT7Ke4Ol6s7u9g6lHYYKggNmfuYT+Z5DF7+b/Sj3DfTt7GukntycdjD40qPljnkxRdYtC0yFzspecuUxo/camWTVUr+kBvlpcOG7ifLX0ncRrYG29qLnlUbpe0MfuaRPv9FdSHMDNL7NpOLQThvYeLW3E5j3iEMUBRwt0bioYeRDEG1EPKSXDTAam/RUgyhZo53CBhnANoajeAULBGkF2JE2CoTC6xfWvztUTpYK/Vgh5Qo5FXsMCGJ13N4fQnpsNuHzzEkka/p8NSoviB8zUrgVKjVJE9SmpSQXwSGylVuZOe5Kj+AfUWsGb3SRMkbgbX0OgpLeOWecCQv8qFj6NnXnOvIEnRU2A8bVo/GfeYnFLbr9Mvd/wUzt8he

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.2

Any 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).

[edison1105]

a workaround: use watch instead.