JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.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" :disabled="!formOK">
          <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...

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: () => ({
    password: '',
    confirmPassword: '',
    email: '',
  }),
  computed: {
    formOK() {
      return Object.values(this.msg).every(n => !n);
    },
    msg() {
      const remainingChars = 6 - this.password.length;

      return {
        password: this.password.length < 6
          ? 'Пароль должен быть не менее 6 символов, еще ' + remainingChars + ' символов'
          : null,
        confirmPassword: this.password !== this.confirmPassword
          ? 'Пароли не совпадают'
          : null,
        email: !this.email
          ? 'поле не должно быть пустым'
          : /^\w+([\.-]?\ w+)*@\w+([\.-]?\ w+)*(\.\w{2,3})+$/.test(this.email)
            ? null
            : 'Введите корректный имейл',
      };
    },
  },
  methods: {
    changeToTnc() {
      this.$emit('change', 'tnc');
    },
  },
});

Vue.component('tnc', {
  template: '#tnc',
  methods:{
    changeToBack() {
      this.$emit('change', 'signUpForm');
    },
  },
});

new Vue({
  el:'#app',
  data: {
    componentName: 'signUpForm',
  },
  methods: {
    change(newComp) {
      this.componentName = newComp;
    },
  },
});