Vue js why the function does not work when a new value appears?

This is what the documentation says:

Note that if a certain dependency is beyond the scope of the instance (that is, not reactive), then the calculated property will not be updated.

The count variable is declared inside a function and is not a reactive Vue dependency. Therefore, the calculated property will not be updated.

The documentation shows an example when the calculated property will not be updated. Also, it says:

By default, computed properties are read-only, but if necessary, you can also specify a setter

Therefore, to solve this problem, declare the variable count as reactive, and change the code as follows:

 data: { count: '' }, computed: { counter: { //геттер get: function () { return this.count }, // сеттер: set: function (newValue) { //можно делать что-то с новым значением newValue if(this.getCart()){ for(var a in this.getCart()){ this.count = this.getCart()[a][3] break; } } } } } 

Another way to solve this problem is to use watch ; for this, the counter variable also needs to be made reactive:

 data: { count: 0, counter: 0 }, watch: { counter: function (newValue) { //можно делать что-то с новым значением newValue if(this.getCart()){ for(var a in this.getCart()){ this.count = this.getCart()[a][3] break; } } } } 

More details can be read here , here and here .