vuejs绑定动态的值后不随之变化？

Question

我想编写一个数量的加减组件，类似于这样，点击加号增加数量，点击减号减少数量。

问题是加号我需要做限制，每一行都不能大于它本来的数量，这个数量是从list里面取出来的，是动态的，现在我使用v-bind到一个自定义属性上，然后取出来，

<div class="num-container">

            <span class="num-cicle num-minus" :data-num="goods.number" @click="count(goods,-1)">-</span>

            <span>{{goods.number}}</span>

            <span class="num-cicle num-plus" :data-num="goods.number" @click="count(goods,1,$event)">+</span>

          </div>

方法

count(val,num,e){

        if(num>0){

          let tempValue=val.number+1;

          if(tempValue>e.target.getAttribute('data-num')){

            Toast("数量不能大于最大签收数量")

          }else{

            val.number++;

          }

        }else{

          if(val.number > 0){

            val.number--;

          }else{

            Toast("数量不能再少了")

          }

        }

      }

但是由于是v-bind,所以我每次取出来的值都是改完了之后的值，无法达到我想要的效果。这里的难点是每一行的数量都是从list里取出来的动态值，我通过代码更改了之后if这个条件永远无法满足，各位有什么好办法吗？