Open a vue component from a method once a button is clicked on a dialog box in Vue.Js

I have two vue components which are the following:

firstcomponent.vue

<template>
<div class="profile-setup" v-show="profile">
    <div class="md-layout md-gutter">
        <div class="md-layout-item md-size-100">
            <div class="md-title">Setup your profile</div>
        </div>
        <div class="md-layout-item md-size-50">
            <md-field>
                <label>Names</label>
                <md-input v-model="real"></md-input>
                <span class="md-helper-text">Your real names</span>
            </md-field>
        </div>
        <div class="md-layout-item md-size-50">
            <md-field>
                <label>Display Name</label>
                <md-input v-model="display"></md-input>
                <span class="md-helper-text">Your display name</span>
            </md-field>
        </div>
        <div class="md-layout-item md-size-50">
            <md-field>
                <label>Account Name</label>
                <md-input v-model="account"></md-input>
                <span class="md-helper-text">Your account name</span>
            </md-field>
        </div>
        <div class="md-layout-item md-size-50">
            <md-field>
                <label>Phone number</label>
                <span class="md-prefix">+250</span>
                <md-input v-model="number" type="number"></md-input>
                <span class="md-helper-text">Your phone number</span>
            </md-field>
        </div>
        <div>
            <div>
                <md-dialog-confirm
                        :md-active.sync="active"
                        md-title="Account created!"
                        md-content="Do you want to create <strong>RWPay</strong> account?"
                        md-confirm-text="Yes"
                        md-cancel-text="No thanks"
                        @md-cancel="onCancel"
                        @md-confirm="onConfirm" />
            </div>

        </div>
    </div>

    <md-dialog-actions>
        <md-button class="md-dense md-raised md-primary" @click="active = true">Save</md-button>
    </md-dialog-actions>
</div>

<script>
    export default {
        name: 'firstcomponent',
        data: () => ({
            real: null,
            display: null,
            account: null,
            number: null,
            active: false,
            value: null,
            profile: true
        }),

        methods: {
            onConfirm () {
                console.log('second confirmed');
            },
            onCancel () {
                console.log('second canceled');
            }
        }
    }
</script>

secondcomponent.vue

<template>
<div class="secondcomponent">
    <md-tabs md-alignment="centered">
        <md-tab id="tab-mobile" md-label="Mobile Money" to="/components/tabs/mobile">
            <div class="md-layout md-gutter">
                <div class="md-layout-item md-size-100">
                    <md-field>
                        <label>Phone number</label>
                        <span class="md-prefix">+250</span>
                        <md-input v-model="number" type="number"></md-input>
                    </md-field>
                </div>
            </div>
        </md-tab>

        <md-tab id="tab-card" md-label="Debit/Credit Card" to="/components/tabs/card">
            <div class="md-layout md-gutter">
                <div class="md-layout-item md-size-100">
                    <md-field>
                        <label>Card type</label>
                        <md-select v-model="cardtype" name="cardtype" id="cardtype" md-dense>
                            <md-option value="visa">Visa</md-option>
                            <md-option value="mastercard">Mastercard</md-option>
                            <md-option value="american-express">American Express</md-option>
                        </md-select>
                    </md-field>
                </div>
                <div class="md-layout-item md-size-100">
                    <md-field>
                        <label>Card number</label>
                        <md-input v-model="card" maxlength="16"></md-input>
                    </md-field>
                </div>
                <div class="md-layout-item md-size-50">
                    <md-field>
                        <label>Expiry date</label>
                        <md-input v-model="month" maxlength="2"></md-input>/
                        <md-input v-model="year" maxlength="2"></md-input>
                    </md-field>
                </div>
                <div class="md-layout-item md-size-50">
                    <md-field>
                        <label>CSC</label>
                        <md-input v-model="exp" maxlength="3"></md-input>
                    </md-field>
                </div>
            </div>
        </md-tab>
    </md-tabs>
    <md-dialog-actions>
        <md-button class="md-dense md-raised">Cancel</md-button>
        <md-button class="md-dense md-raised md-primary">Save</md-button>
    </md-dialog-actions>
</div>

<script>
    export default {
        name: 'secondcomponent',
        data: () => ({
            number: null,
            cardtype: null,
            card: null,
            month: null,
            year: null
        })
    }
</script>

So, i want that when i click on the Yes button on dialog box it opens the secondcomponent.vue, When i click No thanks it goes to another that i'll specify later.

And i'm using Vue in laravel. Your help is appreciated!

via Chebli Mohamed