// source https://jsbin.com/banaleh

index.html

<script src="https://www.gstatic.com/firebasejs/4.0.0/firebase.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.js"></script>


<div id="app">
<!-- input -->
  <h3>Auth</h3>
  https://firebase.google.com/docs/auth/web/facebook-login

  <!-- input -->
  <h3>Create</h3>

  <input v-model="inputTxt" @keyup="createMsg">



  <hr>
  <h6>Retrieve</h6>
    <div v-for="m in data.messages">

      <input v-model="m.txt" @keyup="updateMsg(m)"> <span @click="deleteMsg(m)">X</span>
      
    </div>
  
  
  <h6>Update</h6>
  <h6>Delete</h6>


  

</div>
<script id="jsbin-javascript">
// config 
var config = {
  apiKey: "AIzaSyAZzP3krseTrKRyWI7w4f2ASJFRCB6Vfkc",
  authDomain: "music-6d81e.firebaseapp.com",
  databaseURL: "https://music-6d81e.firebaseio.com",
  projectId: "music-6d81e",
  storageBucket: "music-6d81e.appspot.com",
  messagingSenderId: "961648315314"
};

firebase.initializeApp(config)

var db          = firebase.database() ;
var rootRef     = db.ref() ;
var messagesRef = db.ref("messages") ;

var app = new Vue ({
  el : "#app" , 
  data : {
    inputTxt : "",
    data : {
      messages : [{
      txt : "棒"
    },{
      txt : "棒棒"
    }]
    }
    
  },
  
  methods : {
    
    createMsg : function (event){
       if(event.keyCode == 13) 
        messagesRef.push({
          txt : this.inputTxt  
        }) ;
    },
    updateMsg : function (message){
      console.log(message , this.messages)
      console.log("updateMsg",message)
      var savingMsg = Object.assign({},message)
      delete savingMsg[".key"]
      messagesRef.child(message[".key"]).set(savingMsg)
    },
    deleteMsg : function (message){
//       console.log("message",message)
        messagesRef.child(message[".key"]).remove()
    }
  },
  created : function (){
    var vm = this ;
    messagesRef.on("value",function (dataSanpshot){
  
    var msgs = []
    dataSanpshot.forEach(function(msgSnapshot){
       var obj = msgSnapshot.val()
       obj[".key"] = msgSnapshot.key
       msgs.push(obj)
    })
    console.log("msgs",msgs)
    vm.$set( vm.data , "messages" , msgs)
  
   })
  }
})
</script>


<script id="jsbin-source-javascript" type="text/javascript">// config 
var config = {
  apiKey: "AIzaSyAZzP3krseTrKRyWI7w4f2ASJFRCB6Vfkc",
  authDomain: "music-6d81e.firebaseapp.com",
  databaseURL: "https://music-6d81e.firebaseio.com",
  projectId: "music-6d81e",
  storageBucket: "music-6d81e.appspot.com",
  messagingSenderId: "961648315314"
};

firebase.initializeApp(config)

var db          = firebase.database() ;
var rootRef     = db.ref() ;
var messagesRef = db.ref("messages") ;

var app = new Vue ({
  el : "#app" , 
  data : {
    inputTxt : "",
    data : {
      messages : [{
      txt : "棒"
    },{
      txt : "棒棒"
    }]
    }
    
  },
  
  methods : {
    
    createMsg : function (event){
       if(event.keyCode == 13) 
        messagesRef.push({
          txt : this.inputTxt  
        }) ;
    },
    updateMsg : function (message){
      console.log(message , this.messages)
      console.log("updateMsg",message)
      var savingMsg = Object.assign({},message)
      delete savingMsg[".key"]
      messagesRef.child(message[".key"]).set(savingMsg)
    },
    deleteMsg : function (message){
//       console.log("message",message)
        messagesRef.child(message[".key"]).remove()
    }
  },
  created : function (){
    var vm = this ;
    messagesRef.on("value",function (dataSanpshot){
  
    var msgs = []
    dataSanpshot.forEach(function(msgSnapshot){
       var obj = msgSnapshot.val()
       obj[".key"] = msgSnapshot.key
       msgs.push(obj)
    })
    console.log("msgs",msgs)
    vm.$set( vm.data , "messages" , msgs)
  
   })
  }
})





</script>

jsbin.banaleh.js

// config 
var config = {
  apiKey: "AIzaSyAZzP3krseTrKRyWI7w4f2ASJFRCB6Vfkc",
  authDomain: "music-6d81e.firebaseapp.com",
  databaseURL: "https://music-6d81e.firebaseio.com",
  projectId: "music-6d81e",
  storageBucket: "music-6d81e.appspot.com",
  messagingSenderId: "961648315314"
};

firebase.initializeApp(config)

var db          = firebase.database() ;
var rootRef     = db.ref() ;
var messagesRef = db.ref("messages") ;

var app = new Vue ({
  el : "#app" , 
  data : {
    inputTxt : "",
    data : {
      messages : [{
      txt : "棒"
    },{
      txt : "棒棒"
    }]
    }
    
  },
  
  methods : {
    
    createMsg : function (event){
       if(event.keyCode == 13) 
        messagesRef.push({
          txt : this.inputTxt  
        }) ;
    },
    updateMsg : function (message){
      console.log(message , this.messages)
      console.log("updateMsg",message)
      var savingMsg = Object.assign({},message)
      delete savingMsg[".key"]
      messagesRef.child(message[".key"]).set(savingMsg)
    },
    deleteMsg : function (message){
//       console.log("message",message)
        messagesRef.child(message[".key"]).remove()
    }
  },
  created : function (){
    var vm = this ;
    messagesRef.on("value",function (dataSanpshot){
  
    var msgs = []
    dataSanpshot.forEach(function(msgSnapshot){
       var obj = msgSnapshot.val()
       obj[".key"] = msgSnapshot.key
       msgs.push(obj)
    })
    console.log("msgs",msgs)
    vm.$set( vm.data , "messages" , msgs)
  
   })
  }
})