Vue で v-for を更新する方法

arr = [1,2,3,4,5]とする
console.log(arr.splice(2,2)) //[3,4]
console.log(arr) // [1,2,5]

arr = [2,10,6,1,4,22,3]とする
console.log(arr.sort()) // [1, 10, 2, 22, 3, 4, 6]
arr1 = arr.sort((a, b) => a - b) とします。  
console.log(arr1) // [1, 2, 3, 4, 6, 10, 22]
arr2 = arr.sort((a, b) => b a) とします。  
console.log(arr2) // [22, 10, 6, 4, 3, 2, 1]

arr = [1,2,3,4,5]とする
console.log(arr.reverse()) // [5,4,3,2,1]
console.log(arr) // [5,4,3,2,1]

arr = [1,2,3,4,5]とする
console.log(arr.concat([1,2])) // [1,2,3,4,5,1,2]
console.log(arr) // [1,2,3,4,5]

arr = [1,2,3,4,5]とする
console.log(arr.slice(1,3)) // [2,3]

<li v-for="(val, index) in arr" :key="index">
     {{ val }}
   </li>
   <button @click="sliceBtn">最初の 3 つをスライスします</button>
   
    スライスボタン(){
   // 2. 配列スライスメソッドは v-for を更新しません // スライスは元の配列を変更しません // this.arr.slice(0, 3)

   // v-for 更新を解決 - 元の配列を上書きします let newArr = this.arr.slice(0, 3)
   this.arr = 新しいArr
 },

<li v-for="(val, index) in arr" :key="index">
     {{ val }}
   </li>
   <button @click="sliceBtn">インデックス 0 の値を更新します</button>
   
   スライスボタン(){
   // 値を更新すると、v-for はそれを検出できません // this.arr[0] = 1000
   
   // 解決策 - this.$set()
   // パラメータ 1: ターゲット構造を更新 // パラメータ 2: 位置を更新 // パラメータ 3: 値を更新 let newArr = this.arr.slice(0, 3)
   this.arr = 新しいArr
 },