vue.js when sorting grid only values is updated, not HTML

I am new to Vue.js, and could really use some help on this one.

I am trying to put a class (success) on my table rows to give them background color depending on the value of a property (status) in each of the objects in Array (data), which is working as intended using the v-bind:class.

The problem arises when I sort the table rows by clicking on the table headers. When this is done there is a mismatch between the colored rows and their content, as if only values of rows is updated and not the rows themselves.

Try it here : https://jsfiddle.net/Bayzter/cyv1o78s/

Does anyone know how to solve this, so colored rows again match up with the correct objects?

  <script type="text/x-template" id="grid-template">
  <table>
    <thead>
      <tr>
        <th v-for="key in columns"
          @click="sortBy(key)"
          :class="{active: sortKey == key}">
          {{key | capitalize}}
          <span class="arrow"
            :class="sortOrders[key] > 0 ? 'asc' : 'dsc'">
          </span>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="
        entry in data
        | filterBy filterKey
        | orderBy sortKey sortOrders[sortKey]" v-bind:class="{ 'success' : data[$index].status == 0}">
        <td v-for="key in columns">
          {{entry[key]}}
        </td>
      </tr>
    </tbody>
  </table>
</script>

<!-- demo root element -->
<div id="demo">
  <form id="search">
    Search <input name="query" v-model="searchQuery">
  </form>
  <demo-grid
    :data="gridData"
    :columns="gridColumns"
    :filter-key="searchQuery">
  </demo-grid>
</div>

Where you have

 v-bind:class="{ 'success' : data[$index].status == 0}"

You want

 v-bind:class="{ 'success' : entry.status == 0}"

$data[$index] is not going to refer to the current-order item, it's going to refer to the original-order item. entry is the current item.