Changes in Ember data does not show the live changes in HTML

Question

In my ember application as shown below when user clicks send the action in component will send the api post request and receive the successful data, can be see in ember inspector data tab, But I need to refresh the page to see newly added item, I tried some example shown in ember guide, nothing helps

My action code is

actions:{
    send(Text_Message){
        if(Text_Message != null){
            console.log(this.chatid);
            var data = {
                    "Message" : Text_Message,
                    "ChatId" : this.chatid
            }
            var store = this.get('store').createRecord('message',data)
            store.save().then((response)=>{
            })
        }else{
            alert("Type something to send")
        }
    }

}

handle bar template is

{{#if messages}}
        <div>
        {{#each messages as |msg|}}
            <div class= {{check msg.SenderId userid }}> 
                {{msg.Message}}
             </div>
           {{/each}}
        </div>
        {{else}}
        <div class = "groupmessage-no-Msg">
            <div class="groupmessage-msg-content"> No Messages </div>     
        </div>
        {{/if}}
        <div class = "groupmessage-msg-control">
            {{input  type="text" placeholder="Type a Message Here... " value=Text_Message}}
            <div {{ action 'send' Text_Message}} class="groupmessage-sendbutton groupmessage-sendbutton1" >Send</div>
        </div>

Answer 1

you have to push the data you sent to the messages array,

this.messages.push(data);

if it doesn't update use this

 this.messages = [...this.messages, { ...data }]