How to count the number of elements in this particular object

I am making a call to an API and the response is somehow what I expect. However, I want to count the number of elements returned and I can not do it. This is what I think is important from the code.

Call in Vue component

data(){
    return {
      messages: {}
    }
  },
loadMessages(){
      axios.get("api/messagesmenu")
        .then((data) => { this.messages = data.data})
    }

Api controller

public function index(){

    $messages = Message::all()->where('read_at', NULL);

    if(isset($messages)){
        foreach($messages as $message){
            $from = User::find($message->from_id);
            $message->fromPrenom = $from->first_name;
            $message->fromNom = $from->last_name;
            $message->fromImage = $from->user_image;
        }
    }else{
        $messages = [];
    }


    return $messages;
}

Type of response from the API

{"3":{"id":560,"from_id":2,"to_id":1,"content":"tgr","created_at":"2019-07-15 16:59:03","read_at":null,"fromPrenom":"abdel1","fromNom":"Hidalgo","fromImage":"user2-160x160.png"}}

I want to count the number of objects I obtain. if (in vue component) I do

this.messages.length

it returns undefined

via Chebli Mohamed