использовать axios

var SignupForm = Vue.component('signup-form', { 
   
  // TEMPLATE 
  template: '#signup-form', 
   
  // DATA 
  data() { 
    return { 
      email: '', 
      email_msg: '', 
      password1: '', 
      pwd1_msg: '', 
      password2: '', 
      pwd2_msg: '', 
      disable_btn: true, 
      msg1: true, 
      msg2: true 
    } 
  }, 
   
  // WATCH 
  watch: { 
    email: function(value) { 
      this.valid_email(value, 'email_msg'); 
    }, 
    password1: function(value) { 
      if(this.check_password_length(value, 'pwd1_msg', 6)) { 
        this.check_passwords_match(); 
      } 
    }, 
    password2: function(value) { 
      if(this.check_password_length(value, 'pwd2_msg', 6)) { 
        this.check_passwords_match(); 
      } 
    } 
  }, 
   
  // METHODS 
  methods: { 
     
    valid_email(email, msg) { 
      if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email)) { 
        this[msg] = ''; 
        return true; 
      } else { 
        this[msg] = 'Keep typing...waiting for a valid email'; 
        return false; 
      }  
    }, 
     
    check_password_length(value, msg, total) { 
      var length = value.length; 
      var sum = 0; 
      var display; 
       
      sum = (total - length); 
       
      switch(sum) { 
        case 0: 
          display = ''; 
          break; 
        case 1: 
          display = 'Keep going - just need '+ sum + ' more character.'; 
          break; 
        default: 
          display = 'Keep going - just need '+ sum + ' more characters'; 
      } 
       
      if(length >= total) { 
        this[msg] = ''; 
        return true; 
      } else { 
        this[msg] = display; 
        return false; 
      } 
       
    }, 
     
    check_passwords_match() { 
      if(this.password1.length > 5 && this.password2.length > 5) { 
          if(this.password2 != this.password1) { 
            this.pwd2_msg = 'Passwords do not match'; 
            this.disable_btn = true; 
            return true; 
          } else { 
            this.pwd2_msg = ''; 
            this.disable_btn = false; 
            return false; 
          } 
        } 
    }, 
     
    on_signup() { 
 
      this.axios.post(('test.php', this.email).then()); 
 
      this.email = ''; 
      this.password1 = ''; 
      this.password2 = ''; 
      this.email_msg = ''; 
      this.pwd1_msg = ''; 
      this.pwd2_msg = ''; 
      this.msg1 = false; 
      this.msg2 = false; 
      this.disable_btn = true; 
      this.$emit('change_comp', 'results'); 
    },  
     
    show_terms() { 
      this.$emit('change_comp', 'terms'); 
    } 
  } 
   
}); 
 
var Results = Vue.component('results', { 
   
  // TEMPLATE 
  template: '#results', 
   
  // METHODS 
  methods: { 
    back_to_signup() { 
      this.$emit('change_comp', 'signup-form'); 
    } 
  } 
   
}); 
 
var Terms = Vue.component('terms', { 
   
  // TEMPLATE 
  template: '#terms', 
   
  // METHODS 
  methods: { 
    back_to_signup() { 
      this.$emit('change_comp', 'signup-form'); 
    } 
  } 
   
}); 
 
 
new Vue({ 
   
  // ELEMENT 
  el: '#app', 
   
  // DATA  
  data: { 
    compname: 'signup-form' 
  }, 
   
  // COMPONENTS 
  components: { 
    'signup-form': SignupForm, 
    'results': Results, 
    'terms': Terms 
  }, 
   
  methods: { 
    swapcomp: function(comp) { 
      this.compname = comp; 
    } 
  } 
   
});

@import url("https://fonts.googleapis.com/css?family=Roboto"); 
* { 
  box-sizing: border-box; 
} 
 
body { 
  height: 100%; 
  font-family: 'Roboto', sans-serif; 
  background: linear-gradient(to left, #79CB0A, #B5D020); 
} 
 
.container { 
  display: flex; 
  flex-direction: column; 
  justify-content: center; 
  align-items: center; 
} 
 
header { 
  margin: 30px 0; 
  text-align: center; 
} 
header h2 { 
  text-transform: uppercase; 
  margin: 0; 
} 
header p { 
  font-size: 1em; 
} 
header a { 
  text-decoration: none; 
  border-bottom: 2px dotted #FF8700; 
  color: inherit; 
} 
 
.signup { 
  width: 700px; 
  height: 460px; 
  position: relative; 
  overflow: hidden; 
  box-shadow: 10px 10px 60px rgba(0, 0, 0, 0.4); 
  display: flex; 
  justify-content: flex-end; 
  align-items: center; 
  border-radius: 5px; 
} 
 
.signup:before { 
  content: ""; 
  position: absolute; 
  width: 100%; 
  height: 100%; 
  transform: scaleX(-1); 
  z-index: -1; 
  background: url(https://source.unsplash.com/Qmox1MkYDnY/900x500) no-repeat; 
} 
 
form { 
  width: 50%; 
  height: 80%; 
  padding: 20px 50px 20px 20px; 
} 
 
form .form-group { 
  display: flex; 
  flex-direction: column; 
  margin: 0 0 20px 0; 
  color: #8F949B; 
  font-size: .9em; 
} 
form .form-group label { 
  margin: 0 0 16px 0; 
} 
form .form-group span { 
  font-size: .8em; 
  color: #FF3400; 
} 
form .form-group span#characters { 
  font-size: .8em; 
  color: #8F949B; 
} 
 
.form-group input[type="text"], 
.form-group input[type="password"] { 
  border: none; 
  outline: none; 
  background: transparent; 
  padding: 0 0 10px 0; 
  font-size: 1em; 
  border-bottom: 1px dotted #8F949B; 
} 
 
.form-group input[type="password"] { 
  color: #FF3400; 
} 
 
form .form-group:last-child { 
  flex-direction: row; 
  justify-content: space-between; 
  align-items: center; 
  margin: 40px 0 0 0; 
} 
form .form-group:last-child button { 
  border: none; 
  background: linear-gradient(to left, #FF8700, #FFB100); 
  padding: 10px 30px; 
  border-radius: 20px; 
  color: #FFFFFF; 
  font-size: .8em; 
  font-weight: bold; 
  letter-spacing: 1px; 
  cursor: pointer; 
} 
form .form-group:last-child button.active { 
  opacity: .5; 
  cursor: default; 
} 
form .form-group:last-child a { 
  color: #8F949B; 
  text-decoration: dotted; 
  font-size: .8em; 
} 
 
.results, .terms { 
  width: 50%; 
  height: 80%; 
  padding: 20px 50px 20px 20px; 
} 
 
.fade-enter-active, .fade-leave-active { 
  transition: all .8s; 
} 
 
.fade-enter, .fade-leave-active { 
  opacity: 0; 
  transform: translateX(-40px); 
}

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 
<div class="container"> 
 
  <header> 
    <h2>Sign Up Form (Coded)</h2> 
    <p>Based on <a href="https://drc8llcc7rqy7.cloudfront.net/shots/2409898/24-sign-up-large" target="blank">Sign Up Design #39</a> by <a href="https://dribbble.com/deab" target="blank">Denis Abdullin</a>.</p> 
  </header> 
   
  <div id="app" class="signup"> 
    <transition name="fade" mode="out-in"> 
      <component :is="compname" @change_comp="swapcomp($event)"></component> 
    </transition> 
  </div> 
   
  <template id="signup-form"> 
      <form> 
        <div class="form-group"> 
          <label for="email">Email</label> 
          <input type="text" v-model="email" /> 
          <span v-if="email.length > 1">{{ email_msg }}</span> 
        </div> 
        <div class="form-group"> 
          <label for="psw1">Password <span id="characters">(6 or more characters required)</span></label> 
          <input type="password" v-model="password1" /> 
          <span v-show="msg1">{{ pwd1_msg }}</span> 
        </div> 
        <div class="form-group"> 
          <label for="psw2">Repeat Password</label> 
          <input type="password" v-model="password2" /> 
          <span v-show="msg2">{{ pwd2_msg }}</span> 
        </div> 
        <div class="form-group"> 
          <button :class="{active: disable_btn}":disabled="disable_btn" @click.prevent="on_signup()">Sign Up</button> 
          <a href="#0" @click="show_terms()">terms & conditions</a> 
        </div> 
      </form> 
    </template> 
   
    <template id="results"> 
      <div class="results"> 
        <h4>FORM SUBMIT SUCCESSFUL</h4> 
        <p>Form data gets saved and/or sent to server. There could also be a confirmation sent to email address</p> 
        <p>Button would take you to some sort of after signup page.<br>In this case it just shows the form again</p> 
        <button @click="back_to_signup()">Continue</button> 
      </div> 
    </template> 
   
    <template id="terms"> 
      <div class="terms"> 
        <h4>TERMS & CONDITIONS</h4> 
        <p>A list of terms, conditions, and policies.</p> 
        <button @click="back_to_signup()">Back</button> 
      </div> 
    </template> 
   
</div>