How to toggle between two components by using v-if directives in vue.js?

i have two components Register.vue and Login.vue ,Register.vue is responsible for registration it will contain two headings like Login and Signup ,if the user clicks on Login heading inside the Register page it’s automatically hide the Signup(Register.vue) component and it displays the Login.vue , upto this it’s working fine[Register.vue page when user clicks on Login thing it should opens Login page ]1.[After clicking Login heading it opens like this ]2in Login page also two headings Login and Signup if the user clicks on the signup heading it will hide the login.vue component and it should display the Register.vue ,it’s not working How to fix this thing

Register.vue

<template>
<div class="main">
    <div  v-if="flag==true"  class="container">
        <img id="side-img" src="../assets/sideImg.png" alt="notFound" />
        <p id="side-content">Online Book Shopping</p>
        <div class="box">
            <div class="headings">
               
                <h5 class="signin" v-on:click="flip()" id="login" :class="{ active: isLogin }" @click="isLogin = true">Login</h5>
                <h5 class="signup" id="signup" :class="{ active: !isLogin }" @click="isLogin = false">signup</h5>
            </div>
            <form ref="myForm" @submit.prevent="handlesubmit">
                <div class="fullname">
                    <p>FullName</p>
                    <input type="name" id="name-input" class="namebox"  required v-model="fullName" autocomplete="off" pattern="[A-Za-z]{3,12}">
                </div>
                <div class="username">
                    <p>EmailID</p>
                    <input type="email" id="Email-input" class="emailbox" autocomplete="off" required v-model="email" pattern="^[a-z0-9._%+-][email protected][a-z0-9.-]+.[a-z]{2,4}$">
                </div>
                <div class="password-section">
                    <p>Password</p>
                    <input :type="password_type" class="password" :class="{'password-visible': isPasswordVisible }" id="passField" v-model="password" pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*d)(?=.*[@$!%*?&])[[email protected]$!%*?&]{6,}$" required>
                    <i class="bi bi-eye-slash" id="togglePassword" @click="togglePassword();"></i>
                </div>
                <div class="mobile">
                    <p>MobileNumber</p>
                    <input type="tel" class="telephone" autocomplete="off" v-model="mobile" id="tel" pattern="^d{10}$" required>
                </div>
                <button class="btn-section" id="btn" type="submit">Signup</button>
            </form>
        </div>
    </div>
    <Login v-if="flag==false" />
</div>
</template>

<script>
import Login from './Login.vue'
import service from '../service/User'
export default {
    name: 'Register',
    components: {
        Login
    },
    data() {
        return {
            fullName: '',
            email: '',
            password: '',
            mobile: '',
            password_type: "password",
            isLogin: false,
            isPasswordVisible: false,
            flag: true,
            title: 'Online Book Shopping'
        }
    },
    methods: {
        flip() {
            this.flag = !this.flag;
        },
        togglePassword() {
            this.password_type = this.password_type === 'password' ? 'text' : 'password'
            this.isPasswordVisible = !this.isPasswordVisible
        },
        handlesubmit() {
            let userData = {
                fullName: this.fullName,
                email: this.email,
                password: this.password,
                mobile: this.mobile
            }
            service.userRegister(userData).then(response => {
                if (response.status == 201) {
                    alert("user registered successfully");
                    this.$refs.myForm.reset();
                    this.$router.push('/login');
                }
                return response;
            }).catch(error => {
                alert("invalid credentials");
                return error;
            })
        }
    }
}
</script>

Login.vue

<template>
<div class="main">
    <div  v-if="flag" class="container">
        <img id="side-img" src="../assets/sideImg.png" alt="notFound" />
        <p id="side-content">Online Book Shopping</p>
        <div class="box">
            <div class="headings">
                <h5 class="signin"  :class="{ active: !isSignup }" @click="isSignup = false">Login</h5>
                <!-- <router-link to="/register">
                    <h5 class="signup"  id="signup" :class="{ active: !isLogin }" @click="isLogin = false">signup</h5>
                </router-link> -->
                <h5 class="signup"   id="signup" v-on:click="flip();" :class="{ active: isSignup }" @click="isSignup = true">signup</h5>
            </div>
            <form @submit.prevent="">
                <div class="username">
                    <p>EmailID</p>
                    <input type="email" id="Email-input" class="emailbox" autocomplete="off" required v-model="email" pattern="^[a-z0-9._%+-][email protected][a-z0-9.-]+.[a-z]{2,4}$">
                </div>
                <div class="password-section">
                    <p>Password</p>
                    <input :type="password_type" class="password" :class="{'password-visible': isPasswordVisible}" id="passField" v-model="password" pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*d)(?=.*[@$!%*?&])[[email protected]$!%*?&]{6,}$" required>
                    <i class="bi bi-eye-slash" id="togglePassword" @click="togglePassword();"></i>
                </div>
                <div class="forget-section">
                    <a href="">Forgot-password</a>
                </div>
                <div class="btn-section">
                    <button type="submit" @click="handlesubmit();" class="login-btn">Login</button>
                </div>
                <div class="seperator">
                    <h5><span>OR</span></h5>
                </div>
                <div class="btn-groups">
                    <button type="button" class="btn btn-primary">Facebook</button>
                    <button type="button" class="btn btn-light">Google</button>
                </div>
            </form>
        </div>
    </div>
    <Register  v-else />
</div>
</template>

<script>
import Register from './Register.vue'
import service from '../service/User'
export default {
    name: 'Login',
    components:{Register},
    data() {
        return {
            email: '',
            password: '',
            password_type: "password",
            isPasswordVisible: false,
            isSignup: false,
            flag:true,
        }
    },
    methods: {
          flip() {
            this.flag = !this.flag;
        },
        togglePassword() {
            this.password_type = this.password_type === 'password' ? 'text' : 'password'
            this.isPasswordVisible = !this.isPasswordVisible
        },
        handlesubmit() {
            let userData = {
                email: this.email,
                password: this.password,
            }
            service.userLogin(userData).then(response => {
                    if(response.status==200){
                    alert("user logged in... ");
                    return response;
                    }
            }).catch(error => {
                alert("invalid credentials");
                return error;
            })
        }
    }
}
</script>

<style lang="scss" scoped>
@import "@/styles/Login.scss";
</style>


console errors

vue.runtime.esm.js?2b0e:619 [Vue warn]: Unknown custom element: <Register> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <Login> at src/Pages/Login.vue
       <Register> at src/Pages/Register.vue
         <App> at src/App.vue
           <Root>

Answer

Try to use async import,it will work

name:() => import('./path')