How to make toggle sorting in Vue with vuex?

Question

JavaScript

there is an application on Vue
It is necessary to apply sorting or cancel it when clicking on the checkbox.
in the method created()i call action in vuex. This action makes an API request and stores the data in an array.
I made the data to be stored in another array. Like a duplicate, so that the original array contains data without sorting.

The problem is that when I cancel the sorting (I remove the checkbox from the checkbox), the data does not change to the original ones, but remains sorted.
How to change it?

VUEX:

export default new Vuex.Store({
  state: {
    originalMovies: [],
    movies: [],
    sortBy: "default",
    isLoading: true,
  },
  mutations: {
    SET_ALL_MOVIES: (state, movies) => {
      state.movies = movies.data;
      state.originalMovies = movies.data;
      state.isLoading = false;
    },
    SET_SORTED_MOVIES: (state, sortKey) => {
      if (sortKey === "title") {
        const movies = state.movies;
        state.originalMovies = state.movies;
        movies.sort((a, b) => {
          let compare = 0;
          if (a[sortKey] > b[sortKey]) {
            compare = 1;
          } else if (b[sortKey] > a[sortKey]) {
            compare = -1;
          }
          return compare;
        });
        state.originalMovies = movies;
      }

      if (sortKey === "default") {
        state.originalMovies = state.movies;
      }
    }
  },

  actions: {
    async GET_ALL_MOVIES({ commit }) {
      await axios
        .get(API_URI)
        .then(response => {
          commit("SET_ALL_MOVIES", response.data);
        })

        .catch(error => {
          console.log(error);
          return error;
        });
    },

    SORT_MOVIES({ commit }, sortKey) {
      console.log(sortKey);
      commit("SET_SORTED_MOVIES", sortKey);
    }
  },
  getters: {
    MOVIES(state) {
      return state.originalMovies;
    }
  }
});

Component:

<Sorting @click="sort" />

<div  v-for="movie in MOVIES>
<p movie.title>
<p movie.description>
</div>

computed: {
    ...mapGetters(["MOVIES"])
}
created() {
    this.GET_ALL_MOVIES();
  },

methods: {
...mapActions(["GET_ALL_MOVIES", "SORT_MOVIES"]),
sort(value) {
      switch (value) {
        case "name":          
          this.SORT_MOVIES("title");
          break;      
        case false:
          this.SORT_MOVIES("default");  
          break;
      }
}

Answer 1

Bind on a computed property.
It will return sorted or not items, depending on some Boolean value.
something like:

if (this.sorting) { 
 return this.SORT_MOVIES
} else {
 return this.NO_SORT_MOVIES
}

sotring change on click, and that’s all
if it’s a checkbox, then make some element and try to tie a click on it
, something like an example: