Why is rendering not happening?

Question

Vue.js

data() {
    return {
      templatesList: this.$store.getters.templatesList,
    };
  },

sortByData() {
      const arr = this.$store.getters.templatesList;
      const n = arr.length;
      for (let i = 0; i < n - 1; i++) {
        for (let j = 0; j < n - 1 - i; j++) {
          if (arr[j + 1].created_at < arr[j].created_at) {
            const t = arr[j + 1];
            arr[j + 1] = arr[j];
            arr[j] = t;
          }
        }
      }
      console.log(arr);
      this.templatesList = arr;
      return true;
    },

The list of elements is in templatesList, I display it on the page
On click I call the sortByData method, in the console I see that the array with the data is changing, but on the page everything remains the same, although I specify this.templatesList = arr;
vuedevtools shows no events

Answer 1

Turn on console warnings. You are trying to modify the array directly in the store, which is not allowed.

const arr = this.$store.getters.templatesList.slice(0);

Well, there is a built-in sort method for sorting:

arr.sort(({created_at:a}, {created_at:b}) => a < b ? -1 : a > b ? 1 : 0);