<div id="app">
    <div class="sort-orders">
        <a v-for="sortkey in Object.keys(orderedListOptions)" v-on:click="sortOrder = sortkey" v-bind:class="{active: sortOrder == sortkey}">{{sortkey}}</a>
    </div>
    <ul>
        <li v-for="(item, index) in sort(sortOrder)" v-html="item" v-id="index">
    </ul>
</div>
body {
  background: #f2f2f2;
  color: #333;
  font-size: 18px;
  line-height: 1.5;
  padding: 20px;
}

/* buttons */

.sort-orders a {
  background: #999;
  padding: 10px 14px;
  margin: 0 10px 0 0;
  border-radius: 2px;
  cursor: pointer;
}

.sort-orders a:hover {
  background: #888;
}

.sort-orders a.active {
  background: #49b293;
}

/* list */
let list = [
  "Michael Gary Scott",
	"Dwight Schrute",
	"Jim Halpert",
	"Pam Beesly-Halpert",
	"Darryl Philbin",
	"Erin Hannon",
	"Andy Bernard",
	"Phyllis Lapin-Vance",
	"Stanley Hudson",
]

let vm = new Vue({
	data: {
		list: [],
		sortOrder: "Popularity",
	},
	created: function(){
		// simulating asynchronous loading of data
		setTimeout(() => {
			this.list = list;
		}, 1000)
	},
	computed: {
		orderedListOptions: function(){
			return {
				"Popularity": () => { return this.list },
				"A-Z": () => { return this.list.slice().sort() },
				"Z-A": () => { return this.list.slice().sort().reverse()},
			}
		},
	},
	methods: {
		sort: function(sortOrder){
			return this.orderedListOptions[sortOrder]()
		}
	},
	el: "#app"
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

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