如何将数据阵列从laravel刀片发送到vue组件？

Question

如果我在laravel刀片上{{ dd($message_data ) }}，结果如下：

我想将数组数据发送到vue组件

在laravel视图刀片上，我尝试这样：

<message-list :message-data="{{ $message_data }}"></message-list>

我的消息列表vue组件如下：

<template>
    <div class="panel panel-default">
       ...
    </div>
</template>
<script>
    export default {
        props: ['messageData'],
        mounted() {
            console.log(this.messageData)
            console.log('test')
        }
    }
</script>

console.log的结果不显示

结果如下：

我该如何解决这个问题？

如果我这样做：

<message-list message-data="test"></message-list>

console.log的结果显示。但它是数组不显示