title: Data passed to vue.js component failed to render but shown in vue devtools
body: <p>I'm trying to pass an object data from Laravel to Vue.js component containing data with eloquent relationships. However, when I access the page, the data was not displaying on the page; and when I checked the Vue devtools, I found the data in the debugger:</p>
  
  <p><a href="https://i.stack.imgur.com/X0i8i.png" rel="nofollow noreferrer">Screenshot to the Vue Debugger</a></p>
  
  <p>Here is my code from <code>ChatsController</code> which prepares the data and pass to the view using <code>compact()</code> helper function:</p>
  
  <pre><code>$id = Auth::user()-&gt;id;
  $conversations = Conversation::with(['member' =&gt; function($query) use ($id){
    $query-&gt;where('user_id', $id);
  }, 'member.messages' =&gt; function($query){
    $query-&gt;orderBy('updated_at', 'desc');
  }, 'member.user.profile_picture'])-&gt;get();
  </code></pre>
  
  <p>Here is my <code>ChatConversation.vue</code>, which is supposed to display the data passed from the view:</p>
  
  <pre><code>&lt;template&gt;
    &lt;ul&gt;
      &lt;li class="contact" v-for="conversation in conversations"&gt;
        &lt;div class="wrap"&gt;
          &lt;span class="contact-status online"&gt;&lt;/span&gt;
          &lt;img :src="imgUrl()" alt="" /&gt;
          &lt;div class="meta"&gt;
            &lt;p class="name" v-if="conversation.member.user"&gt;{{ conversation.member.user.first_name }}&lt;/p&gt;
            &lt;p class="preview" v-if="conversation.member.user"&gt;{{ conversation.member.messages.message[0] }}&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
    export default {
      props: ['conversations'],
  
      data(){
        return{
  
        }
      },
  
      methods: {
        imgUrl(){
          return "storage/images/profile_picture/default.jpg";
        }
      }
    };
  &lt;/script&gt;
  </code></pre>
  
  <p>and this is how I call the vue component in my view:</p>
  
  <pre><code>&lt;chat-conversation :conversations="{{ $conversations }}"&gt;&lt;/chat-conversation&gt;
  </code></pre>
  
  <p>If the data is successfully passed, why won't it display? Am I missing something?</p>