mdb input databinding behaving strangely

<column lg="2" md="2">
  <div class="text-right icon-div">
    <btn tag="a" color="amber" floating size="lg"><fa icon="minus" @click.native="subtractOne()"></fa></btn>
  </div>
</column>
<column lg="2">
  <md-input v-model="order.quantity"></md-input>
</column>
<column lg="2" md="5">
  <div class="text-left icon-div">
    <btn tag="a" color="amber" floating size="lg" @click.native="addOne()"><fa icon="plus"></fa></btn>
  </div>
</column>

it's bound to a property on a view model like so:

data() {
  return {
    order: {
      total: function() {
        return this.product.price * this.quantity;
      },
      product: {
        price: 0,
        selected: 'Free'
      },
      term: {
        price: 0,
        selected: 1
      },
      support: {
        price: 0,
        selected: 'Standard'
      },
      quantity: '0',
      duration: 1
    }
  };
},

addOne: function() {
  console.log(this.order.quantity);
  this.order.quantity = (parseInt(this.order.quantity) + 1).toString();
},
subtractOne: function() {
  console.log(this.order.quantity);
  const value = parseInt(this.order.quantity);
  if (value === 0) return;

  this.order.quantity = (value - 1).toString();
}

now, the behavior is strange because when I refresh my page and input is set to 0 initially,  I can hit the + and - buttons and the values get updates so does the input shown.