JSFiddle - React, Tailwind, and code Playground

HTML

<div class="sample">
  <h1>Hi there!</h1>
  <hr>
  <div v-if="alertFirst">
    I am danger alert!
  </div>
  <div>    
    <app-random></app-random>
  </div>  
  <button v-if="!alertFirst" 
          @click="alertFirst = true"
          >
    Open first alert
  </button>   
  <div v-if="alertSecond">
    I am normal alert!
  </div>
  <button v-if="!alertSecond" 
          @click="alertSecond = true"
          >
    Open second alert
  </button> 
</div>

JavaScript

Vue.component('app-random', {
  data(){
    return {
      num: Math.random() * 10
    }
  },
  template: `
    <div class="random">
    	{{ num }}
		</div>
	`
});

let sample = new Vue({
  el: '.sample',
  data: {
    alertFirst: false,
    alertSecond: false
  }
});