Невозможно перейти к следующей странице в многостраничной форме в vue.js

Question

Мне не удалось перейти на следующую страницу в многостраничной форме в vue.js.

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

привязка CurrentPage внутри шаблона vue, как показано ниже:

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

На основе значения currentPage форма будет отображаться соответствующим образом.Значение начинается с -1.CurrentPage необходимо обновлять каждый раз, нажимая кнопку СЛЕДУЮЩАЯ в шаблоне vue.js.

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                
    }
});

Вышеупомянутый код используется внутри метода, который вызывается при нажатии СЛЕДУЮЩАЯ кнопка .Присвоение значения данным vue внутри [else block] приводит к ошибке.

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