Enable Tab Issue

My tab isn't getting activated

HTML

<div class="app">
    <div class="text-title">
        <h1>Vamos começar!</h1>
        <p>Queremos conhecer você melhor! Mas não se preocupe, você pode alterar os dados depois</p>
    </div>


<div class="tabs container-fluid">
        
    <b-tabs class = "the-tabs-group" v-model="tabIndex">
    <b-tab title="Primeira Fase" active>
   
 <div class="form-group row">  

    <label class="col-sm-1 col-form-label">Email:</label>
        <div class="col-sm-9">
            <input type="email" class="form-control " id="email"  name="email">
        </div>
   
    <hr>

    <label class="col-sm-1 col-form-label">Senha:</label>
        <div class="col-sm-9">
           <input type="password" class="form-control" id="pwd" name="pwd">
         </div>
        
    <hr>

    <label class= "confirmsenha col-sm-1 col-form-label">Confirmar senha:</label>
        <div class="col-sm-9">
            <input type="password" class="form-control" id="cpwd" name="cpwd">
         </div>
       

      
    </div>
  </b-tab>

  <b-tab id="segundaFase" title="Segunda Fase" disabled >
      <div id = "bb">
        <h1>Quase lá!</h1>
        <p>Loren ipsum sit amet,consecteur adisplinig elit.Etiam eget commodo nignbi phometehues</p>
       </div>
      
            </b-tab>
        </b-tabs>
    </div>

<hr>
    <div class="next">
        
        <a>
            <b-btn id="nois" class="btn-link" @click="tabIndex++; enableTab">Próxima Fase</b-btn>
        </a>
    </div>

CSS

.btn-link{
    color: #1ba296;
    border: none;  
    transition: color .2s;
    text-decoration: none;
}

.btn-link:hover{
    border: none; 
    color: black;

}
h1 {
  font-family: "Roboto";
  font-weight: 300;
}

.hello {
  background-color: #f5f5f5;
  font-family: "Roboto";
  font-weight: 100;
}

.text-title h1 {
  text-align: center;
  font-size: 60px;
  margin-top: 15px;
}

.text-title p {
  text-align: center;
  font-size: 30px;
}

.tabs {
  margin-top: 5vh;
}
.the-tabs-group {
  text-align: left;
  margin-left: 5vw;
}

.the-tabs-group label {
  font-size: 18px;
  margin: 3vh 0;
}

.form-control {
  height: 45px;
  margin: 3vh 10px 0px;
}

.next {
  text-align: left;
  margin-left: 5vw;
  font-size: 20px;
}

.next img {
  width: 7px;
  margin-left: 2px;
}

hr {
  width: 100vw;
}


@media screen and (max-width: 850px) {
  .text-title h1 {
    text-align: center;
    font-size: 40px;
    margin-top: 15px;
  }

  .text-title p {
    text-align: center;
    font-size: 20px;
  }

  .form-control {
    height: 45px;
    margin: 3vh 40px 0px;
  }
}

@media screen and (max-width: 575px) {
  .text-title h1 {
    text-align: center;
    font-size: 40px;
    margin-top: 15px;
  }

  .text-title p {
    text-align: center;
    font-size: 20px;
  }

  .form-control {
    height: 45px;
    margin: 0px;
  }
}

JavaScript

new Vue({
  el: '#app',
  data: {
       tabIndex: 0
    },
    methods:{
        enableTab: function(){
        console.log("chamou");
      	var tab = document.getElementById("segundaFase");
      	tab.removeAttribute('disabled'); }
            }
})