Route query change is triggered in child components before they are hidden (change between Vue 2 and Vue 3)

[dword-design]

Vue version

3

Link to minimal reproduction

https://github.com/dword-design/try-vue3-route-query-watch

Steps to reproduce

There seems to have been a change from Vue 2 to Vue 3 that changed the behavior on when watchers are triggered. I have linked a minimal example where a component is hidden depending on $route.query and in the component itself I watch for changes. Expected is that when the component is hidden, the watcher is not triggered. But it is triggered before the component is hidden. Was correct in Vue 2, in Vue 3 it feels wrong. It has many implications to how the component would have to be written.

Open the link above and follow the steps to reproduce it.

What is expected?

The subcomponent is hidden without the watcher being triggered.

What is actually happening?

The watcher is triggered and then the component is hidden.

System Info

System:
    OS: macOS 12.5.1
    CPU: (8) x64 Apple M1 Pro
    Memory: 14.75 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 14.19.3 - ~/.nvm/versions/node/v14.19.3/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 8.18.0 - ~/.nvm/versions/node/v14.19.3/bin/npm
  Browsers:
    Chrome: 107.0.5304.110
    Firefox: 104.0.1
    Safari: 16.0

Any additional comments?

No response

[posva]

Duplicate of #1562