JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/vue@2.5.13/dist/vue.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.8.1/firebase.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<div id="app" class="container">
  <h1>Firebase Real Time DB</h1>
  <div v-for="message in messages" class="card">
    <div class="card-body">
      {{ message.text }}
    </div>
  </div>
  
  <hr>
  <textarea v-model="newMessage" class="form-control"></textarea>
  <br>
  <button @click="send" class="btn btn-primary">Send</button>

</div>

JavaScript

new Vue({
	el: '#app',
  
  data: {
  	messages: [],
    
    newMessage: null
  },
  
  methods: {
  	send () {
      // Get a key for a new Message.
      var newMsgKey = firebase.database().ref().child('messages').push().key
      firebase.database().ref().child(`messages/${newMsgKey}`).set({
        text: this.newMessage
      })
      
      // reset new message text
    	this.newMessage = null
    }
  },
  
  mounted () {
    var config = {
      apiKey: "AIzaSyCDbzBcYN2fbLo6Bn1CT0ohjbPhnxh7rIc",
      authDomain: "skg-chat.firebaseapp.com",
      databaseURL: "https://skg-chat.firebaseio.com",
      projectId: "skg-chat",
      storageBucket: "skg-chat.appspot.com",
      messagingSenderId: "198257086299"
    };
    firebase.initializeApp(config);
    
    var messagesRef = firebase.database().ref('messages')
    messagesRef.on('child_added', (snapshot) => {
      this.messages.push(snapshot.val())
    });
  }
})