title: Vue.js orderBy does not work properly with uppercase and lowercase
body: <p>I am working on an application with Laravel 5.2 + Vuejs + Vueify and I have an array of object listed on a table but I have 2 problems.</p>
  
  <p><strong>1. orderBy works in separated with uppercase and lowercase</strong></p>
  
  <p>The orderBy is applying separated with record where the first letter is uppercase and lower case!</p>
  
  <p><strong>2. specials caracteres on the filter field</strong> </p>
  
  <p>Typing "<strong>Á</strong>gua" on the filter field does not find the "Agua" result because of the acute accent on the letter A and I would like to ignore the accent... is that possible?</p>
  
  <p><strong>JS File</strong></p>
  
  <pre><code>Vue.filter('pmlOrderBy', function(arr, sortKey, reverse) {
  
    if (!sortKey) {
      return arr;
    }
    var order = (reverse &amp;&amp; reverse &lt; 0) ? -1 : 1;
  
    // sort on a copy to avoid mutating original array
    return arr.slice().sort(function(a, b) {
      if (sortKey !== '$key') {
        if (Vue.util.isObject(a) &amp;&amp; '$value' in a) a = a.$value;
        if (Vue.util.isObject(b) &amp;&amp; '$value' in b) b = b.$value;
      }
      a = Vue.util.isObject(a) ? Vue.parsers.path.getPath(a, sortKey) : a;
      b = Vue.util.isObject(b) ? Vue.parsers.path.getPath(b, sortKey) : b;
  
      a = a.toLowerCase();
      b = b.toLowerCase();
  
      //         return a.localeCompare(b) * order;
  
      return a === b ? 0 : a &gt; b ? order : -order;
    });
  });
  
  
  new Vue({
  
    el: 'body',
  
    data: {
      record: {},
      selected: [],
      list: [{
        name: 'Google',
        id: 1,
      }, {
        name: 'Água',
        id: 2,
      }, {
        name: 'Agua Branca',
        id: 3,
      }, {
        name: 'first time',
        id: 4,
      }, {
        name: 'boston',
        id: 5,
      }, {
        name: 'Type',
        id: 6,
      }, {
        name: 'Facebook',
        id: 7,
      }, ],
      sortProperty: 'name',
      sortDirection: 1,
    },
  
    methods: {
  
      sort: function(property) {
        this.sortProperty = property;
        this.sortDirection = (this.sortDirection == 1) ? -1 : 1;
      },
  
    }
  
  });
  </code></pre>
  
  <p><strong>HTML File</strong></p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;input type="text" v-model="textFilter" class="form-control" placeholder="Type to filter..."&gt;
  &lt;/div&gt;
  
  &lt;hr&gt;
  
  &lt;div class="container"&gt;
    &lt;div class="alert alert-info"&gt;Click at the TH to sort&lt;/div&gt;
    &lt;table class="table table-striped table-bordered"&gt;
      &lt;thead&gt;
        &lt;tr&gt;
          &lt;th @click="sort('id')" style="cursor: pointer;"&gt;Id&lt;/th&gt;
          &lt;th @click="sort('name')" style="cursor: pointer;"&gt;Name&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
        &lt;tr v-for="r in list | filterBy textFilter | pmlOrderBy sortProperty sortDirection"&gt;
          &lt;td class="text-center" style="width:90px"&gt;{{ r.id }}&lt;/td&gt;
          &lt;td&gt;{{ r.name }}&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="http://jsbin.com/sakaho/edit?html,js,output" rel="nofollow"><strong>JS Bin</strong></a></p>
  
  <p><strong>==== EDITED ====</strong></p>
  
  <p>As Taylor and RainningChain helped me bellow we almost got there!</p>
  
  <p>I found <a href="https://mattstauffer.co/blog/case-insensitive-orderby-filter-with-vuejs" rel="nofollow">this article</a> and updated the code and the JS Bin above but the problem now is:</p>
  
  <ul>
  <li>It is sort properly but if I try to sort other column clicking on another TH it brakes.</li>
  <li>The problem with special caracteres still there =/</li>
  </ul>
  
  <p>Anyone?</p>
  
  <p>Thanks!</p>