Vue: forceUpdate does not update computed fields

[nagyzsolthun]

Version

2.5.13

Reproduction link

https://github.com/nagyzsolthun/vue-forceupdate-computed

Steps to reproduce

1) build project
2) open build/build.html
3) wait 2 seconds

What is expected?

"last update time" to change

What is actually happening?

"last update time" does not change

[JounQin]

https://vuejs.org/v2/api/index.html#vm-forceUpdate

As I know, forceUpdate is only used to force update UI, not for inter computed data.

See also: https://vuejs.org/v2/guide/computed.html#Computed-Caching-vs-Methods

[yyx990803]

As @JounQin pointed out: $forceUpdate only force the view to re-render, not the computed properties. Your computed property should not contain an external non-reactive variable (time), which makes it impure.

[anlek]

@yyx990803 Any reference to how to make a updatable time work in the UI?

[ypresto]

@anlek methods: are called on $forceUpdate. Move time function from computed to methods (don't forget to change time to time()) and it should work as expected.

[mannok]

@yyx990803 You are right. It won't recompute the properties. However, I encounter another issue today.
$forceUpdate is not updating reactive variable too!

for example:
template part: <label ref="lbl" :attr="attr">{{new Date()}}</label>
data in script part: data() { return { attr: 'foo' } }

If I update attr and the content in console by vm.$refs['lbl'].setAttribute('data-attr', 'bbb') and vm.$refs['lbl'].innerText = 'ccc'
follow by vm.$forceUpdate(), only the innerText part updated!!!

How come?