<div id="app">
  <span class="btn" @click="sorting = !sorting">click</span>
  <div>{{sorting}}</div>
  <div v-for="item in sort">{{item.id}}.<span> {{item.name}}</span></div>
</div>
.btn {
  background-color: aqua;
}
new Vue({
  el: "#app",
  data() {
    return {
      sorting: false,
      movieSorting: [
        {
          id: 1,
          name: "GGGG"
        },
        {
          id: 2,
          name: "ZZZZ"
        },
        {
          id: 3,
          name: "QQQQ"
        }
      ],
      movieSortingRev: [
        {
          id: 3,
          name: "QQQQ"
        },
        {
          id: 2,
          name: "ZZZZ"
        },
        {
          id: 1,
          name: "GGGG"
        }
      ],
    }
  },
  computed: {
    sort() {
      return this.sorting ? this.movieSorting : this.movieSortingRev
    }
  },
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js