Vue listens for text changes in the textarea input box

html:

 <textarea v-bind:maxlength="140" @input="descArea" v-model="introduct" name="abstract" id="abstract" placeholder="Add a bio to your profile"></textarea>

  <span class="num-desc">{{Surplus}}/140</span>

script:

export default {
  data(){
    return{
      Surplus:140,
      introduct:''
    }
  },
  methods:{
    descArea(){
      var textVal = this.introduct.length;
      this.Surplus = 140 - textVal;
    }
  }
}

desc:

@input monitors input changes

v-model implements two-way binding of data