How to update v-for in Vue

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

let arr = [2,10,6,1,4,22,3]
console.log(arr.sort()) // [1, 10, 2, 22, 3, 4, 6]
let arr1 = arr.sort((a, b) => a - b)  
console.log(arr1) // [1, 2, 3, 4, 6, 10, 22]
let arr2 = arr.sort((a, b) => b a)  
console.log(arr2) // [22, 10, 6, 4, 3, 2, 1]

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

let 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]

let 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">Slice the first 3</button>
   
    sliceBtn(){
   // 2. Array slice method will not cause v-for to update // slice will not change the original array // this.arr.slice(0, 3)

   // Solve v-for update - overwrite the original array let newArr = this.arr.slice(0, 3)
   this.arr = newArr
 },

<li v-for="(val, index) in arr" :key="index">
     {{ val }}
   </li>
   <button @click="sliceBtn">Update the value of index 0</button>
   
   sliceBtn(){
   // When updating a value, v-for cannot detect it // this.arr[0] = 1000
   
   // Solution - this.$set()
   // Parameter 1: Update target structure // Parameter 2: Update position // Parameter 3: Update value let newArr = this.arr.slice(0, 3)
   this.arr = newArr
 },