Unable to navigate to the Next page in Multi page form in vue.js

I was unable to navigate to the Next page in Multi page form in vue.js.

      name: 'xxx',
      data: ()=>{
         return{     
            currentPage: -1,
            text: "Hello"
         }
      },
  }         

binding CurrentPage inside vue template like below:

<div class="container" v-for="(pages, pageid) in pages_json" :currentPage="currentPage"  v-if="currentPage== pageid">

Based on currentPage value, the form will be displayed accordingly. Value starts from -1. CurrentPage needs to be updated every time while clicking NEXT Button in vue.js template.

this.$root.$validator.validate(scope + '.*').then(valid => {
  if (valid){
    if(text == "Hello"){
      this.currentPage += 1;
    }
    else{     
      // throwing error here, since assigning value to this.currentPage
      this.currentPage = 1;  

      console.log(this.currentPage)  // updating perfectly here                
    }
});

Above code is used inside the method which would be called on NEXT Button click. Assigning value to the vue data inside [else block] throws an error.

vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in render: "TypeError: Cannot read property '0' of undefined"