Why is the save_click_or_not method not working correctly?

Question

Vue.js

The essence of the question is as follows: if you click on the button next or back without pressing the save button, then a dialog box should pop up (save or not change), if the button is pressed, then just go to the next (previous) step, but if you click on the save button, and then the next (back) button once. then it does not work, and if you click again, a dialog box with a question pops up. Where is the mistake?
Link to my example in codepen

<div id="app">
  <v-app id="inspire">
    <v-stepper class="pb-0" v-model="steppers[0]" vertical>
            <v-stepper-step class="pb-4" :complete="steppers[0] > 1" step="1" editable >
              О себе
            </v-stepper-step>
            <v-stepper-content class="pt-0 mb-0 pb-0 pl-4 mt-0" step="1">
   
              <div style="float: right">
                <v-btn class="mr-2 ml-0 mt-0 mb-4" @click="save_not_save=false">Сохранить</v-btn>
                <v-btn class="mr-0 ml-0 mt-0 mb-4" @click="save_click_or_not(1,0)">Далее</v-btn>
              </div>
            </v-stepper-content>
                        
            <v-stepper-step class="pb-4" :complete="steppers[0] > 2" step="2" editable >
              Формат работы и занятость
            </v-stepper-step>
            <v-stepper-content class="pt-0 mb-0 pb-0 pl-4 mt-0" step="2">
                <v-btn class="mr-0 ml-0 mt-0 mb-4" @click="save_click_or_not(-1,0)">Назад</v-btn>
              <div style="float: right">  
                <v-btn class="mr-2 ml-0 mt-0 mb-4" @click="save_not_save=false">Сохранить</v-btn>
                <v-btn class="mr-0 ml-0 mt-0 mb-4" @click="save_click_or_not(1,0)">Далее</v-btn>
              </div> 
            </v-stepper-content>

            <v-stepper-step  class="pb-4" :complete="steppers[0] > 3" step="3" editable>
              Образование
            </v-stepper-step>
            <v-stepper-content class="pt-0 mb-0 pb-0 pl-4 mt-0" step="3">
         
                <v-btn class="mr-0 mb-4 ml-0 mt-0" @click="save_click_or_not(-1,0)">Назад</v-btn>
              <div style="float: right">  
                <v-btn class="mr-2 ml-0 mt-0 mb-4" @click="save_not_save=false">Сохранить</v-btn>
                <v-btn class="mr-0 ml-0 mt-0 mb-4" @click="save_click_or_not(1,0)">Далее</v-btn>
              </div> 
            </v-stepper-content>

            <v-stepper-step class="pb-4" :complete="steppers[0] > 4" step="4" editable>
              Профессии и Сферы деятельности
            </v-stepper-step>
            <v-stepper-content class="pt-0 mb-0 pb-0 pl-4 mt-0" step="4">
              
                <v-btn class="mr-0 ml-0 mt-0 mb-4" @click="save_click_or_not(-1,0)">Назад</v-btn>
              <div style="float: right">  
                <v-btn class="mr-2 ml-0 mt-0 mb-4" @click="save_not_save=false">Сохранить</v-btn>
                <v-btn class="mr-0 ml-0 mt-0 mb-4" @click="save_click_or_not(1,0)">Далее</v-btn>
              </div> 
            </v-stepper-content>
          </v-stepper>
   <v-dialog v-model="save_or_save" width="500">
      <v-card>
        <v-toolbar>
          <h3>Внимание</h3>
        </v-toolbar>
        <v-divider></v-divider>
        <v-card-text class="pa-4">
          Вы хотите сохранить текущие данные?
        <div class="pt-4">
          <v-btn @click.native="dialog_close(false,0)" class="ma-0">Нет</v-btn>
          <v-btn @click.native="dialog_close(true,0)" style="float: right" class="ma-0">Да</v-btn>
        </div>
        </v-card-text>
      </v-card>
    </v-dialog> 
  </v-app>
</div>

javascript code

new Vue({
  el: '#app',
  data () {
    return {
      e1: 0,
      steppers:[1,1,1,1],
      save_not_save: true,
      save_or_save: false,
    }
  },
  methods:{
    save_click_or_not(naprav,index){
       this.step_go=naprav
      if(this.save_not_save){
        this.save_or_save=true;
        // this.dialog_save(tyy)
      }
      if(!this.save_not_save){
        this.steppers[index]=this.steppers[index]+this.step_go
        this.save_not_save=true
      }
    },
    dialog_close(y_n,index){
      this.save_or_save=false
      this.save_not_save=true
      this.steppers[index]=this.steppers[index]+this.step_go
    },
  }
})

Answer 1

Vue can't track directly setting a value by index.
Must use $set, replace

this.steppers[index]=this.steppers[index]+this.step_go

on the

this.$set(this.steppers, index, this.steppers[index] + this.step_go)