JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div id="app"></div>
    <script src="//unpkg.com/[email protected]/dist/vue.min.js"></script>
</body>

CSS

button {
  width: 80px;
  font-size: 100%;
  padding: 10px;
  margin: 10px;
}

p {
  width: 80px;
  padding: 40px;
  margin: 20px;
  display: inline-block;
  border: 2px gray solid;
}

p > span {
  font-size: 80%;
}

#compA {
  background-color: AliceBlue;
}

#compB {
  background-color: MistyRose;
}

JavaScript

const myComponentA = {
		template: `
				<p id="compA">A <span>(v-if)</span></p>
		`,
    data() {
    		return {
    				counter: 0
        }
    },
    created() {
        this.counter++
    		console.log('A has been created. counter = '+this.counter+'.')
    }
}

const myComponentB = {
		template: `
				<p id="compB">B <span>(v-show)</span></p>
		`,
    created() {
    		console.log('B has been created.')	
    }
}

const app = new Vue({
    data: {
        toggleA: false,
        toggleB: false
    },
    components: {
        'my-component-a': myComponentA,
        'my-component-b': myComponentB
    },
    template: `
				<div>
						<button @click="toggleA = !toggleA">A</button>
     				<button @click="toggleB = !toggleB">B</button>
      			<div>
      					<my-component-a v-if="toggleA" />
      					<my-component-b v-show="toggleB" />
       			</div>
				</div>
		`
}).$mount('#app')