Private channel works with static id but not dynamic vue.js - vue.js

Question

On private channel when i hard coded the ID it works fine and i m receiving messages but when set the value to Dynamic it won't work.
Here is my app.js code
const livechat = new Vue({
el: '#livechat',
data: {
conversation: [],
},
methods: {
addMessage(message) {
// Add to existing messages
// this.conversation.messages.push(message);
// Persist to the database etc
axios.post('/messages', message).then(response => {
this.conversation.messages.push(response.data);
})
}
},
created() {
axios.get('/messages/' + user_id).then(response => {
this.conversation = response.data;
});
Echo.private('chat.' + this.conversation.conversation_id)
.listen('MessageSent', (e) => {
this.conversation.messages.push({
conversation_id: e.message.conversation_id,
message: e.message.message,
name: e.user.firstname
});
});
}
});
On console log i m receving the conversation_id = 22
Echo.private('chat.22') //This works fine
Echo.private('chat.' + this.conversation.conversation_id) //This won't working
Broadcast file
public function broadcastOn()
{
return new PrivateChannel('chat.' . (int)$this->message->conversation_id);
}
Is there any thing wrong in my code. Your help will be appreciated. Thanks

Answer 1

The Echo.private call should be done only when you have all the data - in other words, within axios.get().then(...):
axios.get('/messages/' + user_id).then(response => {
this.conversation = response.data;
Echo.private('chat.' + this.conversation.conversation_id)
.listen('MessageSent', (e) => {
this.conversation.messages.push({
conversation_id: e.message.conversation_id,
message: e.message.message,
name: e.user.firstname
});
});
});