How to call method on click as opposed to on v-for in Vuejs

Question

I'm trying to display this array of objects based on highest to lowest rating of each item. It works fine using the method on the v-for, but I would really like to display the list of objects in the order they appear initially and THEN call a function that displays them by highest to lowest rating.

When I have it set as v-for="item in items" and then try to call the method on a button, such as @click="rated(items)", nothing happens. Why would I be able to display the array initially on the v-for with the method attached, but not on a click event?

const items = [
  {
    name: "Bert",
    rating: 2.25
  },
  {
    name: "Ernie",
    rating: 4.6
  },
  {
    name: "Elmo",
    rating: 8.75
  },
  {
    name: "Rosita",
    rating: 2.75
  },
  {
    name: "Abby",
    rating: 9.5
  },
  {
    name: "Cookie Monster",
    rating: 5.75
  },
  {
    name: "Oscar",
    rating: 6.75
  }
]

new Vue({
  el: "#app",
  data: {
    items: items
  },
  methods: {
    rated: function(items) {
      return items.slice().sort(function(a, b) {
        return b.rating - a.rating;
      });
    },
    sortByRating: function(items) {
      return items.slice().sort(function(a, b) {
        return b.rating - a.rating;
      });
    }
  }
});

#app {
  display: flex;
  flex-flow: row wrap;
  margin-top: 3rem;
}

.item {
  flex: 1;
  margin: .5rem;
  background: #eee;
  box-shadow: 0px 2px 4px rgba(0,0,0,.5);
  padding: 1rem;
  min-width: 20vw;
}

.toggle {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: .5rem 1rem;
  background: DarkOrchid;
  color: #fff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div v-for="item in rated(items)" 
       class="item">
  <p>{{item.name}}</p>
  <p>{{item.rating}}</p>
  </div>
</div>

Answer 1

Try to rewrite the array for the result returned by the method, like this.

@click="items = rated(items)

and, inside v-for you can keep using items.