vue_tabs_component.vue

<template>
    <div class="container">
        <div class="columns" style="margin-top: 40px;">
            <div class="column is-12">
                <div class="tabs is-toggle">
                    <ul>
                        <li :class="[ setting === 'account' ? 'is-active' : '']">
                        <a @click="setting='account'">
                            <span class="icon is-small"><i class="fas fa-user" aria-hidden="true"></i></span>
                            My Profile
                        </a>
                        </li>
                        <li :class="[ setting === 'billing' ? 'is-active' : '']">
                            <a @click="setting='billing'">
                                <span class="icon is-small"><i class="fas fa-credit-card" aria-hidden="true"></i></span>
                                Billing
                            </a>
                        </li>
                        <li :class="[ setting === 'preferences' ? 'is-active' : '']">
                            <a @click="setting='preferences'">
                                <span class="icon is-small"><i class="fas fa-sliders-h" aria-hidden="true"></i></span>
                                Preferences
                            </a>
                        </li>
                    </ul>
                </div>

                <div class="box help-content">
                    <code v-if="setting ==='account'">
                      
                      Show account

                    </code>
                    <code v-if="setting ==='billing'">
                        
                        Show billing

                    </code>
                    <code v-if="setting ==='preferences'">
                        
                        Show preferences

                    </code>
                    </pre>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'ProfileInfo',
        data() {
            return {
                setting: 'account'
            }
        },
    }
</script>

<style lang="css" scoped>

    .help-content {
        background-color: white !important;
    }
    .help-tabs {
        margin-bottom: 10px !important;
    }
    .tabs li.is-active a {
        color: #FFFFFF;
        font-weight: bold;
    }
    code, pre {
        color: #1b1e21 !important;
        background-color: white !important;
    }

    .box { 
        height: 500px;
    }

</style>