[Vuejs]-How can I enable next button only if success?

try this,

wrote a sample function .. by default it will be disabled, if you write something button will enable. no jquery used native javascript

document.getElementById("next").disabled = true;
function do_enable(e=true) {
    if (e)
    {
     alert("Success")
      /*vm.pid=e.pid;
      console.log(vm.pid);*/
      document.getElementById("next").disabled = false;
      
  }
    else {
      vm.response = e;

     alert("Registration Failed") 
    }
}

<input type="text" id="status" onchange="do_enable()" placeholder="say something">
<button type="submit" id="next" class='btn btn-next btn-primary' name='next' value='Next'>Next</button>

Use :disabled to enable or disable button using Vue. Read more.

  <button type="submit" class='btn btn-next btn-primary' name='next' value='Next' :disabled="isDisabled">Next</button>

  success: function(e) {
          if (e.status)
          {
           alert("Success")
            vm.pid=e.pid;
            console.log(vm.pid);
            vm.isDisabled = false; //enable button

        }
          else {
            vm.response = e;
            vm.isDisabled = true; //disable button

           alert("Registration Failed") 
          }
      }

Update:
Don’t forget to add isDisabled in vue data object

data: {
   isDisabled: false
}

do this

success: function(e) {
  if (e.status) {
    alert("Success")
    vm.pid = e.pid;
    console.log(vm.pid);
  } else {
    vm.response = e;
    alert("Registration Failed")
    e.preventDefault();//do this it can prevent your from to next tab

  }
}