Vue.js, iView UI how to increment and decrement input value

Question

I have this input field with + and - icons. I would like when i click on + icon, the input value increment by one and when i click on - icon, the input value decrement by 1. the default input value is 1.

I already have methods to increment and decrement but they only work once, the DOM is not being updated. How do fix this?

Screenshot

Here is my code.

<Col :xs="24" :sm="24" :md="12" :lg="12">
   <FormItem label="No. of Pages" label-position="top"> 
      <Input v-model="pages">
         <span slot="prepend" @click="decrement"><Icon type="md-remove-circle" /></span>
         <span slot="append" @click="increment"><Icon type="ios-add-circle" /></span>
      </Input>
    </FormItem> 
</Col>

script

data() {
    return {
      pages: 1
    };
  },

 

methods: {
    increment() {
      this.pages++;
    },
    decrement() {
      if (this.pages === 1) {
        alert("Negative quantity not allowed");
      } else {
        this.pages--;
      }
    }