Simple Vue.js tab navigation component with Bulma

vue_tabs.js

<template>
    <div class="container">
        <div class="columns">
            <div class="column is-12">
                <div class="tabs help-tabs">
                    <ul>
                        <li :class="[ lang === 'crontab' ? 'is-active' : '']"><a @click="lang='crontab'">Crontab</a>
                        </li>
                        <li :class="[ lang === 'php' ? 'is-active' : '']"><a @click="lang='php'">PHP</a></li>
                        <li :class="[ lang === 'bash' ? 'is-active' : '']"><a @click="lang='bash'">Bash</a></li>
                        <li :class="[ lang === 'python' ? 'is-active' : '']"><a @click="lang='python'">Python</a></li>
                    </ul>
                </div>

                <div class="box help-content">
                    <code v-if="lang ==='crontab'">
                        {{monitor.schedule}} your_script.sh && curl -fsS --retry 3 {{monitor.url_code}>
                        /dev/null
                    </code>
                    <code v-if="lang ==='php'">
                        file_get_contents({{monitor.url_code}});
                    </code>
                    <code v-if="lang ==='bash'">
                        curl --retry 2 {{monitor.url_code}}
                    </code>
                    <code v-if="lang ==='python'">
                        # using urllib2:
                        import urllib2
                        urllib2.urlopen("{{monitor.url_code}}")
                    </pre>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'HelpComponent',
        data() {
            return {
                monitor: {
                    schedule: '* * * * *',
                    url_code: 'https://cronhub.io/random_uuid',
                },
                lang: 'crontab',
            }
        },
    }
</script>

<style lang="css" scoped>
    .help-content {
        background-color: white !important;
    }
    .help-tabs {
        margin-bottom: 10px !important;
    }
    .tabs li.is-active a {
        border-bottom-color: #000000;
        color: #7763A9;
        border-bottom: 3px solid;
        font-weight: bold;
    }
    code, pre {
        color: #1b1e21 !important;
        background-color: white !important;
    }
</style>

Thanks - this helped me a lot 👍