Vue watch not triggered when router-view not displayed

[yannbriancon]

Version

4.0.6

Reproduction link

https://codesandbox.io/s/vue-router-watch-issue-miywr

Steps to reproduce

Uncomment <router-view> in pages/index.vue, refresh and see the expected console log

It is triggered by the watch in pages/useService.js because we change the useService.pollingActivated ref value

Comment <router-view> in pages/index.vue, refresh and see no console log

What is expected?

Even when <router-view> is not displayed in index.vue, the watch in pages/useService.js should be triggered and we should see the console log

What is actually happening?

The watch in pages/useService.js is triggered only when <router-view> is displayed in index.vue

[posva]

I think I see where this bug is coming from Vue, I will have to find the exact commit but it's related to deactivating watchers during mounting. You can either wait one tick inside onMounted or use beforeRouteEnter() as a workaround

beforeRouteEnter() {
    useService.pollingActivated.value = true
  },

You can also use useService.pollingActivate somewhere in the template of the component (doesn't need to be displayed)

[edison1105]

another better workaround:

watch(
  () => state.pollingActivated,
  () => {
    console.log(state.pollingActivated);
  }, {
    flush:'sync'
  }
);

[yannbriancon]

I think I see where this bug is coming from Vue, I will have to find the exact commit but it's related to deactivating watchers during mounting. You can either wait one tick inside onMounted or use beforeRouteEnter() as a workaround

beforeRouteEnter() {
    useService.pollingActivated.value = true
  },

@posva I thought it was coming from Vue but the same code without vue-router works well...

[baseballyama]

@yannbriancon

Hi.
I tried to reproduce the issue according to your CodeSandbox URL.
But I couldn't finish executing npm install command in my docker environment (Alpine) and I got the below error.

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: vue-router-watch-issue@0.1.0
npm ERR! Found: vue@3.0.5
npm ERR! node_modules/vue
npm ERR!   vue@"3.0.5" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer vue@"^2.5.22" from @vue/composition-api@0.2.1
npm ERR! node_modules/@vue/composition-api
npm ERR!   @vue/composition-api@"0.2.1" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /root/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2021-07-07T12_40_47_624Z-debug.log

Then I tried the below steps instead of the above operation.

1. Execute vue create my-project (Selected Default (Vue 3) ([Vue 3] babel, eslint))
2. Execute npm install vue-router@next
3. Copied below assets from CodeSandbox.

• components directory
• pages directory
• App.vue
• main.ts (But renamed to main.js)
• router.js

4. Execute npm run serve command.

Then I can see the expected console log even if I commented <router-view>.

So as my hypothesis, this issue is just a version conflict issue between libraries.
And this is not a program bug issue.

So I would like to ask you below 2 points.

1. I want to get an alternative way If you have other reproduce ways that don't have library conflict.
2. I want to know you can solve the issue or not when you follow my alternative operation.

Thank you for reading!

[yannbriancon]

@baseballyama

Thanks for trying to reproduce the issue!

I don't have another reproduction and I modified my code to have a workaround so it would be complicated for me to help for your 2 points.

[baseballyama]

@yannbriancon

Thank you for the update!
I will check it again and I will try to fix it!

[tech-goldenphoenix]

The bug disappeared after upgrading vue and vue-router to the latest version. I think we should close the issue

[posva]

Updating versions does fix the bug