Данные, переданные в компонент vue.js, не удалось отобразить, но они отображаются в vue devtools

Question

Я пытаюсь передать данные объекта из Laravel в компонент Vue.js, содержащий данные с красноречивыми связями.Однако при доступе к странице данные не отображались на странице;и когда я проверил Vue devtools, я нашел данные в отладчике:

Снимок экрана с отладчиком Vue

Вот мой код из ChatsController, который готовитданные и передать в представление с помощью compact() вспомогательной функции:

$id = Auth::user()->id;
$conversations = Conversation::with(['member' => function($query) use ($id){
  $query->where('user_id', $id);
}, 'member.messages' => function($query){
  $query->orderBy('updated_at', 'desc');
}, 'member.user.profile_picture'])->get();

Вот мой ChatConversation.vue, который должен отображать данные, передаваемые из представления:

<template>
  <ul>
    <li class="contact" v-for="conversation in conversations">
      <div class="wrap">
        <span class="contact-status online"></span>
        <img :src="imgUrl()" alt="" />
        <div class="meta">
          <p class="name" v-if="conversation.member.user">{{ conversation.member.user.first_name }}</p>
          <p class="preview" v-if="conversation.member.user">{{ conversation.member.messages.message[0] }}</p>
        </div>
      </div>
    </li>
  </ul>
</template>

<script>
  export default {
    props: ['conversations'],

    data(){
      return{

      }
    },

    methods: {
      imgUrl(){
        return "storage/images/profile_picture/default.jpg";
      }
    }
  };
</script>

и вот как я называю компонент vue в моем представлении:

<chat-conversation :conversations="{{ $conversations }}"></chat-conversation>

Если данные успешно переданы, почему они не отображаются?Я что-то упустил?