Computed property is not updating the DOM using binding

[ScreamZ]

Version

2.2.5

Reproduction link

https://www.webpackbin.com/bins/-Kg9XqY8rVXsOoZjrR1t

Steps to reproduce

Fill identifier and fill same password two times.

What is expected?

The "submit" button should appear

What is actually happening?

The "submit" button is not appearing

---

Is it a vue bug ? It seems ?

I'm using vuelidate for the validation and it generate a $v computed property, using the devtool the $v.$invalid property is updated but not the DOM, when trying to investigate sometimes the button appears, people also says that this is a heinsenbug.

See vuelidate/vuelidate#109 and linked vuelidate/vuelidate#103 seems to be the same

[posva]

Your repro shows nothing, can you provide a minimal JSFiddle or Github using this http://jsfiddle.net/posva/wsr78d2w/
Also, please, remove vuelidate to make sure the bug comes from vue and not vuelidate

[ScreamZ]

Hey @posva I updated the bin a bit, you can see that if you click the button "get current validation state" then the submit button appears too, its look like a refresh problem.

I also opened an issue in vuelidate, but it's weird because if you use it on your own computer with the debug tool, you'll see that the component state (and the computed property) are correctly updated

[posva]

Yes, I saw that. In that case, I'm sorry but I'm going to close this. Come back if you find out the bug is within Vue, and provide a minimal repro without vuelidate. Thanks.

[korpa]

Hi @posva,

Please see my comment vuelidate/vuelidate#103 (comment) and the jsfiddle I provided. This is a plain vuejs example without vuelidate.

Hi,

I'm pretty sure, this is not a vuelidate issue, but an iusse in vuejs itself. Please have a look at: https://jsfiddle.net/ac98frL2/

Try to click on "add field". Nothing will happen. Now change line 6 from to {{foo}} and click on "Run" in the top left corner of jsfiddle. Click on "Add field" again => a new field "field2" should appear.
If you click on "Submit", nothing happens. Now change line 8 as well ({{bar}}}) and re-run the Jsfiddle. Click on "Add field" and then on "Submit". The background of field2 should be red now.

For me it looks like that vuejs only updates if at least one element bound to a static data variable is updated.
What do you think? Could this be the problem?

[posva]

That's a reactivity caveat (search in docs)

In that case you need to use Vue.set: https://jsfiddle.net/1udma8L9/