component status is not updated vue-js - vue.js

Question

im new in vuejs, i have a component which is a custom table that receives a props,this is an array with all the data in order that table consume and show the data. The main problem is that i got the logic to sort the field in the asc/desc table therefore when i click in one of the header the table invoke the next method
order(columnIndex: number) {
const thisRef = this
const arr = this.currentOrder;
let sortedArray = this.rows
.map((row, rowNumber) => ({
row: row,
rowNumber: rowNumber
}))
.sort((a, b): number => {
const cellNumberA =
thisRef.subcolumnsLabels.length * a.rowNumber + columnIndex
const cellNumberB =
thisRef.subcolumnsLabels.length * b.rowNumber + columnIndex
const cellValueA = thisRef.getCellValue(cellNumberA)
const cellValueB = thisRef.getCellValue(cellNumberB)
return cellValueA - cellValueB
if(arr[columnIndex]){
arr[columnIndex] = false;
return cellValueB - cellValueA
}else{
arr[columnIndex] = true;
}
}).map((rowWithRowNumber) => rowWithRowNumber.row)
this.$store.dispatch('market/setSiData',sortedArray)
},
This method receives one columnIndex this is the number of column in which has been click, the same one is worth for ask the position of the array and check if is true or false.
data() {
return {
columsOrder: [false,false,false,false,false,false,false],
}
},
The problem is a few times this works, change for true and sometimes no, i have no idea why that is happen. Any thoughts ?

Answer 1

Please read Change Detection Caveats - For Arrays:
Vue cannot detect the following changes to an array:
When you directly set an item with the index, e.g. vm.items[indexOfItem] = newValue
When you modify the length of the array, e.g. vm.items.length = newLength
You are doing (1) here:
arr[columnIndex] = false
You should use this.$set instead:
this.$set(arr, columnIndex, false)