How to call a computed property recalculation if it depends on a change in an array element?

Question

Vue.js

There is a computed array property arrA.

data: {
  arrB: []
},
computed: {
   arrA: function () {
      return this.arrB;
   }
}

Through long experiments, I found that if I change only one or several elements in the arrB array, then arrA () is not called after that:

func1: function( i )  {
   this.arrB[ i ] = 'значение'   //  Если оперировать на уровне элементов, то arrA() не будет вызвана
}

And if you operate with the array arrB not at the level of its individual elements, but change it all "as a whole" (i.e. change the pointer to the array), then arrA is then called:

func2: function()  {
   this.arrB = [ 'значение', 'ещё значение', 'и ещё' ];   //  Если изменить ссылку на массив, то arrA() будет вызвана
}

Therefore, while I put such a crutch, and it works:

func3: function( i )  {
  var tempArr = clone( this.arrB );       //  Клонирование массива
  tempArr[ i ] = 'значение';
  this.arrB = tempArr;
}

But agree, this sucks. Is it possible to somehow initiate a call to arrA when changing not the entire arrB array, but only its one element? It's a common task, I think. There must be a reasonable solution.

Answer 1

We read the documentation more carefully .
Accordingly, the following would be correct:
this.$set(this.arrB, i, 'значение')