Component data should be updated in realtime

[rentalhost]

Currently it is updated only if some DOM is affected by data. If it is used internally it is not updated. The option here is press "refresh" all the time. My suggestion is update it if any value is changed, even if DOM is not being affected for some reason.

[posva]

Hey, can you boil down the error and provide a repro using this template?
Thanks!

[rentalhost]

@posva You can see it working here WEMRBJ.

The update1s should be ticked each second, while update5s should be ticked each 5 seconds, but only the second one is used on DOM currently.

The vue-devtools should display both ticks in realtime, but it only is refreshed when update5s is updated on DOM.

Current behavior: update1s only is updated on vue-devtools when update5s is updated too.
Expected behavior: update1s should be refreshed in realtime, without wait for a DOM change being in effect.

[posva]

I see, I'll have to look if it's feasible

[phiter]

Still happening. My component has a property and you can't see the changes in real time on the devtools.

[Akryum]

It's how Vue works, if you don't use a data property anywhere in the app (I mean in reactivity-aware code like template or computed properties), it won't have any tracking dependency to avoid doing unnecessary work.

[phiter]

Yeah, I was using the property to check if a div is scrolled all the way down.

Using the property to change the div's class made the prop change in the devtools window.

I tought every property would get updated even if they're not used in the DOM.

:class="['chat-messages-body', options.atBottom ? 'atBottom' : '']"

[FEA5T]

@Akryum @posva

I have had a similar issue here for over a year: Not understanding why my computed props don't update.

When in development, vue-devtools should be considered a valid "use" of that computed property and subscribe to it.

At this point, it is a usability issue because by necessity developers write computed props before consuming them in dom. In fact, one of the best benefits of the dev-tool is that I can see the vue instance and it's computed props, data, etc and have data flow setup/validated before I write ANY dom. While I do this however, it "appears" as if I lose reactivity (making me thing there is a bug in reactivity).

This then triggers days of unnecessary debugging only to find out there is no real issue. It should be in the docs: vuejs/vue#7672 . Also, devtools should just subscribe and show the reactive value for developer convenience and usability.

[posva]

Instead of saying It should be in the docs, create a pull request adding it in the documentation. I'd say that the very least one could do to give back to the project 🙂