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

Question

I am new to Vue.js, and could really use som 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), wich 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>

Answer 1

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.