如何确定Vue列表总和？

Question

我已经使用Vue.js制作了以下列表，总列表位于底部。但是，在排序时，总和也会排序。如何将总和固定在列表的底部？

-现在-

z1

b2

a3

总计

-排序后-

a3

b2

总计

z1

结果显示在列表中

我要排序后

a3

b2

z1

总计

总数总是在底部

<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
});