vue配列オブジェクトがページ表示を変更してもリフレッシュの問題はありません

注意事項
JavaScriptの制限により、Vueは以下の変動する配列を検出できません.

インデックスを使用して直接アイテムを設定する場合、たとえばvm.items[indexOfItem] = newValue

配列の長さを変更すると、例えば、vm.items.length = newLength

例を挙げます.

var vm = new Vue({
  data: {
    items: ['a', 'b', 'c']
  }
})
vm.items[1] = 'x' //       
vm.items.length = 2 //       

第1の問題を解決するために、以下の2つの方法は、vm.items[indexOfItem] = newValueと同じ効果を達成し、同時に状態更新をトリガすることができる.

// Vue.set
Vue.set(vm.items, indexOfItem, newValue)

// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)

グローバルメソッドvm.$setの別名であるVue.setのインスタンスメソッドも使用できます.

vm.$set(vm.items, indexOfItem, newValue)

2つ目の問題を解決するには、spliceを使用します.

vm.items.splice(newLength)

オブジェクト変更検出の注意
それともJavaScriptの制限のため、Vueはオブジェクト属性の追加または削除を検出できません:

var vm = new Vue({
  data: {
    a: 1
  }
})
// `vm.a`        

vm.b = 2
// `vm.b`       

作成したインスタンスに対して、Vueはルートレベルのレスポンス属性を動的に追加できません.ただし、Vue.set(object, key, value)メソッドを使用してネストされたオブジェクトに応答属性を追加することができます.たとえば、次のようになります.

var vm = new Vue({
  data: {
    userProfile: {
      name: 'Anika'
    }
  }
})

ネストされたageオブジェクトに新しいuserProfileプロパティを追加できます.

Vue.set(vm.userProfile, 'age', 27)

また、vm.$setのインスタンスメソッドを使用することもできます.これは、グローバルVue.setの別名にすぎません.

vm.$set(vm.userProfile, 'age', 27)

Object.assign()または_.extend()を使用するなど、既存のオブジェクトに複数の新しい属性を付与する必要がある場合があります.この場合、2つのオブジェクトのプロパティで新しいオブジェクトを作成する必要があります.新しいレスポンス属性を追加したい場合は、次のようにしないでください.

Object.assign(vm.userProfile, {
  age: 27,
  favoriteColor: 'Vue Green'
})

あなたはそうすべきです.

vm.userProfile = Object.assign({}, vm.userProfile, {
  age: 27,
  favoriteColor: 'Vue Green'
})

 
vue公式サイトを抜粋