[Vuejs]-Vue changing the component without URL changes

You could use something like Sweet Alert to display a success or error dialog. It supports Ajax requests so you can display a “your registration is processing, please check your email” message while it is being handled.

The first approach is suitable when user successfully registers and then redirected to login page.

Now issue how to check whether user has entered required field? So there comes form validations. You can use vee-validate plugin and it’s perfect for all projects. I am using it and it has so many available validations.

With these UI validations, after they are passed successfully then only submit action will be fired or else user will be prompted for entering required field.

You can see basic example here – http://vee-validate.logaretm.com/index.html#basic-example

When action is performed,

 ///main.js
 ...
 Vue.use(VeeValidate)
 ...


 // register.vue
 this.$validator.validateAll().then((result) => {

    if (result) {
       //done
       this.$router.replace( '/login' );
    }
    else{
        // throw error
    }

Simple as that.
Try this approach if you want the UI validations on the form.