JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.27/vue.js"></script>
<div id="wrap">
    <h2>Select a category</h2>
    <button @click="sort">
    Sort alphanumeric
    </button>
    <button @click="reverse">
    Reverse list
    </button>
    <ul id="categorySelect">
        <li v-for="cat in categories">${cat.title}</li>
    </ul>
</div>

JavaScript

Vue.config.delimiters = ['${', '}'];

new Vue({
  el: '#wrap',
  data: {
    selectedCategory: null,
    categories: [{
      title: 'ALL',
      category: null
    }, 
    {
      title: 'CATE',
      category: 'sport'
    }, 
                 {
                   title: 'DOG',
                   category: 'sport'
                 },
                 {
                   title: 'SPEED',
                   category: 'sport'
                 },
                 {
                   title: 'CAT',
                   category: 'sport'
                 },
                 {
                   title: 'SPORT',
                   category: 'sport'
                 },
                 {
                   title: 'ART',
                   category: 'sport'
                 },
                 {
                   title: 'PEOPLE',
                   category: 'people'
                 }, 
                 {
                   title: 'CAR',
                   category: 'car'
                 }]
  },
  methods: {
		sort: function () {
    	this.categories.sort(this.sortAlphaNum);
    },
    reverse: function () {
    	this.categories.reverse();
    },
    sortAlphaNum: function (a,b) {
    	var reA = /[^a-zA-Z]/g;
			var reN = /[^0-9]/g;
      var aA = a.title.replace(reA, "");
      var bA = b.title.replace(reA, "");
      if(aA === bA) {
          var aN = parseInt(a.title.replace(reN, ""), 10);
          var bN = parseInt(b.title.replace(reN, ""), 10);
          return aN === bN ? 0 : aN > bN ? 1 : -1;
      } else {
          return aA > bA ? 1 : -1;
      }
  }
  }
});