Vue-devtools: data is no longer reactive, requires refresh to show current values

[ffxsam]

Version

4.1.5-beta.2

Browser and OS info

Chrome 68 / macOS 10.13.6

Steps to reproduce

1. Create a simple button, e.g. <button @click="val = !val">Flip</button>
2. Click the button

What is expected?

I expect the data in Vue DevTools to update immediately

What is actually happening?

Nothing happens; I have to click "Refresh" in DevTools to see the updated value

[ksr583]

If the value I'm messing with is being created (doesn't already exist), I have to use Vue.set() or this.$set to set it, and then it becomes reactive in Vue dev tools. I ran into this a few days ago. Hope that helps. If not, sorry!

[hybridwebdev]

I as well am having the same issue. When I make changes to my state via normal mutations, it works just fine. Everything is reactive. However, if I use time travel, all future interactions with the same chunk of state data are no longer reactive. 3 days now this issue has been plaguing me. I am manipulating state properly, and only changing keys on objects that already exist (not adding or removing). Even using vue.set() doesn't fix the issue.

[socheatsok78]

I'm having the same issue. this.$set() is not refreshing the devtool value. I have to manually click the refresh button.

[pratamatama]

This is happened to me as well.

[zhangenming]

This is happened to me as well.

[zhangenming]

A hack
watch: { val() {}, },

[lkjimy]

Having the same issue.
Windows 10, Chrome 83