Vue

HTML

<div id="app">
  <div class="tab" v-if="isActiveTab('tab1')">
    <h2>Tab 1:</h2>
    <span> Whatever content you wantin tab1</span>
    <input v-model="email" type="email"/><label>Email</label>
    <input v-model="name" type="text"/><label>Name</label>

    
      <button @click="setActiveTab('tab2')" :disabled="!formIsComplete" @click>
          Change tab
      </button>
  
  </div>
  
  <div class="tab" v-if="isActiveTab('tab2')">
    <h2>Tab 2:</h2>
    <span> Congrats you made it to Tab2</span>
    
    
  </div>
  

  
</div>

CSS

.tab{
  padding: 20px;
  display: flex;
  flex-direction: column;
  width : 100%;
  border: 1px solid black;
  }

Vue

new Vue({
  el: "#app",
  data: {
   activeTab: 'tab1',
   name:'',
   email:''
  },
  methods: {
  	isActiveTab(tabId){
    	return this.activeTab === tabId
    },
    setActiveTab(tabId){
    	this.activeTab = tabId
    }
  },
  computed: {
  	formIsComplete(){
    //here you might want to add some more adequate validation rules
    return this.email.length > 0 && this.name.length > 0
    }
  }
})