获取数据显示在控制台中但不在数组laravel vue中显示

Question

这是我的app.js看起来像

const app = new Vue({
    el: '#app',
    data: {
    msg: 'Update new Post:',
    content:'', 
    posts:[],
    },

    ready:function(){
        this.created();
    },

    created(){
         axios.get('http://{mydomain}/home/post')
             .then(response=>{
                 console.log(response);//show if success
                 this.posts=respoonse.data;// putting posts into array 
             })
             .catch(function (error) {
                 console.log(error.response);
             });

    },

我的观看页面看起来像

 @{{posts}}

我的控制器看起来像

 public function getPost(){
        $posts_json = DB::table('posts')
    ->leftJoin('users','users.id','posts.user_id')
        ->leftJoin('profiles','profiles.user_id','posts.user_id')
        ->get();

        return $posts_json;
    }

它在数组中没有显示任何内容，但在控制台中显示数据

{data: Array(9), status: 200, statusText: "OK", headers: {…}, config: {…}, …}