закрыть родительский модал и открыть дочерний модал в ответ на успех axios с laravel vue js

Question

Пользователь должен зарегистрироваться через два шага. оба шага имеют модальность для заполнения деталей. для этого у меня есть два компонента ComponentA для первого модального и componentB для второго модального. Хочу закрыть первый модал в ответе на успех axios и открыть второй модал для второго шага регистрации.

<template>
<!--sction user-signup 1-->
<div class="signup">
    <div class="modal" id="user-signup-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <!-- Modal body -->
                <div class="modal-body text-center" style="background:url(images/user-signup-bg.jpg) no-repeat left top; ">
                    <h2>SIGN UP</h2>
                    <h5 class="setp-tag">Step 1 of 2</h5>
                    <h6>Registered users have access to all MoneyBoy features. This is not a Moneyboy Profile.<br>
                    If you’d like to create a Moneyboy Profile please <a href="#">click here.</a></h6>
                    <form class="user-signup-form" action="./api/user/signup" method="POSt" @submit.prevent="addUser()">
                        <div class="form-group">
                            <label>Username</label>
                            <input type="text" name="username" v-model="username" placeholder="mohamed-ali" class="span3 form-control">
                            <span v-if="hidespan">5 - 20 characters. Letters A-Z and numbers 0-9 only. No spaces.
                            E.g. MikeMuscleNYC.</span>
                            <span v-if="errorinusername"> {{ errorinusername }}</span>
                        </div>
                        <div class="form-group">
                            <label>Email</label>
                            <input type="email" name="email" v-model="email" placeholder="mohamed-ali@gmail.com" class="span3 form-control">
                             <span v-if="errorinemail"> {{ errorinemail }}</span>
                        </div>
                        <div class="form-group">
                            <label>Create a password</label>
                            <input type="password" name="password" v-model="password" placeholder="**********" class="span3 form-control">
                            <span v-if="errorinusername"> {{ errorinpassword}}</span>
                        </div>
                        <div class="form-group turms">
                            <input name="" type="checkbox" value="1" v-model="checked" id="terms"><label for="terms">I am over 18 and agree to the
                            <a href="#">Terms & Conditions</a></label>

                            <!--<label><input type="checkbox" name="terms">I am over 18 and agree to the <a href="#">Terms & Conditions</a>.</label>-->
                            <input type="submit" :disabled="!checked" value="SIGN UP NOW" class="btn btn-primary w-100">
                        </div>
                        <div class="form-group">
                            <p>If you’d like to create a Moneyboy Profile <a href="#">click here.</a></p>
                        </div>
                        <div class="clearfix"></div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <usersignup2component @recordadded="openusersignup2modal()"></usersignup2component>
</div>


<!--sction user-signup 1-->
</template>
<!--sript -->
<script>

Vue.component('usersignup2component', require('./UserSignup2Component.vue').default);

export default {
    data(){
        return {

            username: '',
            email:'',
            password:'',
            checked: false,
            errorinusername: '',
            errorinemail: '',
            errorinpassword: '',
            hidespan: true,
        }
    },

    methods:{

        addUser(){
            axios.post('./api/user/signup', {
                username:this.username,
                email:this.email,
                password:this.password
            })
            .then((response) =>{
                this.$emit('recordadded');

            })

          .catch((error) => {
                 console.log(error.response);
                this.hidespan = false;
                this.errorinusername = error.response.data.errors.username;
                this.errorinemail = error.response.data.errors.email;
                this.errorinpassword = error.response.data.errors.password;

            });            
        },

        openusersignup2modal(){
            console.log('okkkkkkkkkkkkkk');
        }
    },
    mounted() {
        console.log('UserSignUp1Component mounted.')
    }
}
</script>

Что я делаю не так. Я попытался console.log () на метод openusersignup2modal, чтобы увидеть, если эта функция когда-либо вызывал или нет. Не найдено действий по openusersignup2modal ()