JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//unpkg.com/bootstrap@next/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css">
<script src="//unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src="//unpkg.com/tether@latest/dist/js/tether.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
<div id='app'>
<b-btn @click="showShow=!showShow">Show</b-btn>
<b-btn @click="showIf=!showIf">If</b-btn>

    <b-container>

      <b-card no-body>
        <b-tabs card>

          <b-tab title="Show" v-show="showShow">
            <b-row>
              showShow: {{ showShow }}
            </b-row>
          </b-tab>

          <b-tab title="If" v-if="showIf">
            <b-row>
              showIf: {{ showIf }}
            </b-row>
          </b-tab>

          <b-tab title="Tab 1">
            Tab Contents 1
          </b-tab>

          <b-tab title="Tab 2">
            Tab Contents 2
          </b-tab>

        </b-tabs>
      </b-card>

    </b-container>

</div>

JavaScript

window.onload = function() {new Vue({el:'#app',
data: {
    showShow: false,
    showIf: false
},
methods: {

}})}