Component Data not always updating

webdevnerdstuff commented 1 year ago

Vue devtools version

6.4.5

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-wcfjf7?file=src/components/Bar.vue

Steps to reproduce & screenshots

Load example link provided.
On the upper right side of the page click on "Open in New Tab"
Go to the new tab.
Open up Chrome Devtools
Select Vue Devtools
Highlight the <Bar> component.
Change the radio to True/False (back and forth)
Notice that the prop in the Vuejs Devtools does not update.
If you click on "Force Refresh" in Vuejs Devtools, the value updates.

What is expected?

The value should update without having to Force Refresh after every time the state of the data value changes.

What is actually happening?

The data value in Vuejs Devtools does not update the value unless Force Refresh, or closing the Chrome Devtools and reopening it.

System Info

System:
    OS: macOS 13.0.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 13.12 GB / 64.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 19.0.1 - ~/.nvm/versions/node/v19.0.1/bin/node
    Yarn: 1.22.19 - ~/node_modules/.bin/yarn
    npm: 8.19.2 - ~/.nvm/versions/node/v19.0.1/bin/npm

Any additional comments?

Tested and replicated browsers: Chrome Version 108.0.5359.124 (Official Build) (arm64) Edge Version 108.0.1462.76 (Official build) (arm64) Firefox Version 108.0.2 (64-bit) - could not get the open in new page working in Firefox to show the example, but my site has the same issue in this browser.

Additional I have a similar problem in a project I am working on. Where sometimes the value updates, but it is not consistent. I have a switch component (using vuetify), and when I click on that switch, the component data in Vuejs Devtools either does not update, or it will update randomly. I can literally click the switches value back and forth from true to false and do nothing else... and the Vuejs Devtools will not update... then update a few times... then go back to not updating... and so on. This value is also emitted to other components, and the same thing occurs in those components where the data sometimes and/or does not update.

In my code, it's just not just a prop's value, it's also the changed value on different components that is using it. So it's not specific to a prop, but also in setup() it has the issue.

cabal95 commented 1 year ago

Similar problem here. We have a "demo" (parent) component that has a bunch of values that reflect the current UI selections (checkboxes mostly). It then passes those values to the "real" (child) component so we can see the changes in action.

If we use the dev tools to monitor the "demo" component, we can see all the values changing live. But if we monitor the "real" component, they will not update unless we click the "force update".

Reverting to the "beta" version of the plugin, 6.0.0 beta 21, fixes this problem.

bhojkapderas commented 1 year ago

Can confirm also an issue with v6.5.0 on firefox.

inspire22 commented 1 year ago

Phew, I'm having trouble with this too. As far as I can tell, vue devtools is useless in the current state. I'll try reverting to the beta, thanks for the tip. Yes, that solved it for me as well. Edit2 - Dang, that's no good as the beta has this bug with routerlinks https://github.com/vuejs/router/issues/1338