How to fix vue list sum?

Question

I've made the following list, with a total at the bottom, using Vue.js. However, when sorted, the sums are also sorted. How could I fix the sum to the bottom of the list?

--now--

z1

b2

a3

total

--After sorting--

a3

b2

total

z1

The result is shown in the list

I want After sorting

a3

b2

z1

total

total is always at the bottom

<vlist ref="list" :headers="headers" :items.sync="desserts" :search="search" :loading="loading" :scrollToEnd="true" :parentHeight="height"
  @selectItem="selectItem" :desc="'stocklist'"
  >
    <template  slot="list" slot-scope="props">
        <v-flex xs2 :style="rowStyle.name.style"  :class="$selectedClass(props.item)" >{{ props.item.name }}</v-flex>
        <v-flex xs1 :style="rowStyle.stock.style"  class="text-xs-right data-font" v-html="$commaForMinus(props.item.stock)"></v-flex>
        <v-flex xs1 :style="rowStyle.wip.style"  class="text-xs-right data-font">{{ $comma(props.item.wip) }}</v-flex>
        <v-flex xs1 :style="rowStyle.unitprice.style"  class="text-xs-right data-font">{{ $money(props.item.unitprice) }}</v-flex>
        <v-flex xs1 :style="rowStyle.stock_price.style"  class="text-xs-right data-font">{{ $money(props.item.stock_price) }}</v-flex>
        <v-flex xs12 class="text-xs-left data-font-end">{{ props.item.comment }}</v-flex>    
    </template>
</vlist>

var sum_stock=0;
var sum_wip=0;
var sum_stock_price=0;

this.loading=true;
this.desserts=[];
this.$http.post('/api/list/MATERIAL_STOCK.SELECT_ALL_MATERIAL_STOCK_BYDATE',{MONTH:this.$ymd(this.selectedDate)}).then(result =>{ 
    result.data.data.forEach(t => { 
      t.select = false; 
      t.stock_price = t.stock * Math.round(t.unitprice);
      sum_stock+=t.stock;
      sum_wip+=t.wip;
      sum_stock_price+=t.stock_price;
    });
    result.data.data.push({name:'Total:',stock:this.$comma(sum_stock),wip:this.$comma(sum_wip),stock_price:this.$money(sum_stock_price),type:'summary'});
    this.desserts = result.data.data;
    this.loading=false
});