Why doesn't the computed property fire?

Question

JavaScript

Hello

The code

https://codepen.io/Enroller/pen/qBWMLqK

Context of the problem:
I'm writing a small form with validation and a progress bar purely to fire up Vue
The problem occurs when I try to use computed to calculate the number of verified fields and calculate the width of the scrollbar.
It doesn't work.
My understanding is that I read reactive data as I go along

array

this.form.forEach((item)=>{
              if(!item.valid){
                  complete++;
              }
           });

I still call the getter .. But apparently I don’t understand correctly
I write just pulling up Vue and without components, so I apologize in advance it can be hard to read
UPD: Briefly the essence of the problem from the comments:
I pasted the fields in the datahook beforeMount. Reactivity is initialized much earlier.
For this you should usebeforeCreate

Answer 1

valid: falseto each in form[]
and if(!item.valid){the sign was not mistaken?
form.valid you don't set the property to be reactive, so you need to set it todata

Answer 2

Try using this.$set(object, 'newPropName', value) and you'll be fine.