JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div id="app">
  <!-- data:message의 값이 없다면 아래 엘리먼트 출력 -->
  <template v-if="!message">
    <h1>you must send a message for help!</h1>
    <p>dispatch a message immediately</p>
    <p>To neearby kingdom of hearts!</p>
  </template>
  
  <!-- 입력 시 message 값 변경 -->
  <textarea v-model="message"></textarea>
  
  <!-- v-if와 v-show의 차이 점 확인 -->
  <button v-show="message">
    send word to sllies for help!
  </button>
  
  <pre>
    {{$data}}
  </pre>
  
</div>

JavaScript

new Vue({
  el: '#app',
  data: {
    message: ''
  }
 });