Access array value in promise - vue.js

Question

I have emited value from the child and returning the value in a parent, but when I'm trying to access it prints me just blank array?
I haven't dealt with promises in the past, so I don't know much about that...I know something about async and await method..but I don't know how to bundle this function into this.
Thanks in advance for your help.
This is what I have...
insertMessage.vue
export default {
data(){
return{
message:'',
isLoading:false,
}
},
methods:{
addMessage(){
if(this.message !=''){
this.sendData();
} else{
}
},
sendData(){
this.isLoading = true;
this.$http.post('/add-message' , {message:this.message, id_rooms:this.$route.params.id_rooms}).then((response) => {
console.log(response.json());
if(response.body != 'Error'){
this.message = '';
this.$root.$emit('new_message', response.json());
} else{
this.isLoading = false;
}
}, (response) =>{
this.isLoading = false;
});
}
}
}
</script>
print.vue
<template>
<div class="msg_history">
<get_message :messages="messages"></get_message>
<add_message></add_message>
</div>
</template>
<script>
import addMessage from './add-message';
import getMessage from './get-messages';
export default {
components: {
get_message: getMessage,
add_message: addMessage,
},
data() {
return {
messages: []
}
},
mounted(){
this.$root.$on('new_message', (data) => {
this.messages.push(data);
});
},
}
</script>
fetchMessages.vue
<template>
<div class="incoming_msg">
<div class="received_msg">
<div v-for="message in messages" class="received_withd_msg">
{{message.created}} //This is what I want
{{message}} //This is working but print just { "promise": {} }
</div>
</div>
</div>
</template>
<script>
export default {
props:['messages'],
data(){
return{
}
}
}
</script>

Answer 1

You can just do emit in then:
this.$http.post('/add-message' , {message:this.message, id_rooms:this.$route.params.id_rooms}).then((response) => {
if(response.body != 'Error'){
response.json().then( json => {
this.message = '';
console.log(json);
this.$root.$emit('new_message', json);
});
} else {
this.isLoading = false;
}
}, (response) => {
this.isLoading = false;
});