JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.common.js"></script>
<div id="app">
		<component :is="componentName" @change="change"></component>
	</div>

	<template id="signUpForm">
		<div class="col-lg-offset-4 col-lg-4">
			<div class="panel panel-primary" id="formdiv">
				<div class="panel-heading">
					<h3 class="panel-title">Vue.js SignUp Form Validation</h3>
				</div>
				<div class="panel-body">
					<form @submit.prevent>
						<div class="form-group">
							<label for="exampleInputEmail1">Email address</label>
							<input type="text" placeholder="Email" name="email" class="form-control" v-model="email">
							<span v-if="msg.email">{{msg.email}}</span>

						</div>
						<div class="form-group">
							<label for="exampleInputEmail1">Password</label>
							<input type="password" placeholder="Password" name="password" class="form-control" v-model="password">
							<span v-if="msg.password">{{msg.password}}</span>
						</div>			
						<div class="form-group">
							<label for="exampleInputEmail1">Confirm Password</label>
							<input type="password" placeholder="Confirm Password" name="confirmPassword" class="form-control" v-model="confirmPassword" >
							<span v-if="msg.confirmPassword">{{msg.confirmPassword}}</span>
						</div>
						<input type="submit" value="Sign Up"  class="btn btn-warning" v-if="">
						<small><a class="pull-right"  href="#" @click="changeToTnc()">Terms and Conditions</a></small>


					</form>
				</div>
			</div>
		</div>
	</template>
	
	<template id="tnc">
	<div class="col-lg-offset-4 col-lg-4">
		<div class="panel panel-info">
			<div class="panel-heading">
				<h3 class="panel-title">Terms and Conditions</h3>
			</div>
			<div class="panel-body">
				<ul class="list-group">
					<li class="list-group-item">Cras justo odio</li>
					<li class="list-group-item">Dapibus ac facilisis in</li>
					<li class="list-group-item">Morbi leo risus</li>
					<li class="list-group-item">Porta ac...

CSS

body{

  -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;

}
#formdiv{
}
span{
  color: red;
}

JavaScript

Vue.component('signUpForm',{
    template: '#signUpForm',

    data(){

        return{

            password: '',
            confirmPassword: '',
            email: '',
            dusableBTN: true,
            msg: [],


        }
    },


    watch:{
        email(value){
            this.email = value;
            this.check_email(value);
        },

        password(value){

            this.password = value;
            this.check_password(value);
        },
        confirmPassword(value){

            this.confirmPassword = value;
            this.check_confirmPassword(value);
        },

    },

    methods:{

        changeToTnc(){
            this.$emit('change', 'tnc')
        },

        check_email(value){
            if (this.email == ''){
                this.msg['email'] = 'поле не должно быть пустым'

            }else if (/^\w+([\.-]?\ w+)*@\w+([\.-]?\ w+)*(\.\w{2,3})+$/.test(value))
            {
                 this.msg['email'] = '';



            }else{
                 this.msg['email'] = 'Введите корректный имейл';

            }
        },
            check_password(value){
                this.passwordLengthCheck(value)

            },

        check_confirmPassword(value){
            if (this.confirmPassword !== this.password){
                this.msg['confirmPassword'] = 'Пароли не совпадают'

            } else  {
                this.msg['confirmPassword'] = '';

            }
        },

        passwordLengthCheck(password){
            remainingChars = 6 - password.length
            if (password.length < 6){

                this.msg['password'] = 'Пароль должен быть не менее 6 символов' +  ' еще ' + remainingChars + ' символов';

            } else {
                this.msg['password'] = '';


            }
        },






    },
});

Vue.component('tnc',{

    template: '#tnc',

    methods:{
        changeToBack(){
            this.$emit('change', 'signUpForm')
        }
    }
});

new Vue({
	el:'#app',
	data:{
        ...