نحو ه ی استفاده از api resource در لاراول و vuejs

سلام خدمت همه ی دوستان
درحال تهیه یک وبلاگ با لاراول و ویو به صورت spa هستم
data هایی که ذخیره میکنم به این صورت :

  "posts": {
    "id": ,
    "title": "",
    "slug": "",
 }

و همچنین عکس ها رو دریک جدول جدا ذخیره میکنم به اسم photos که یک id داره و یک path که مسیر عکس روذخیره میکنه
برای نمایش پست ها با استفاده از api resource به مشکل خوردم

یک api resource به اسم PostCollection ایجاد کردم به این صورت

 public function toArray($request)
    {
        $data = array();
        foreach ($this->resource as $data) {
            $grades[] = array(
                'id' => $data->id,
               'title'=>$data->title,
               'slug'=>$data->slug
            );
        }
        return $data;
    }

,و همچنن یک api resource دیگر به اسم Photo درست کردم به این صورت

 public function toArray($request)
    {
        return [
          'path'=>url().$this->path,
        ];
    }

کنترلر نمایش پست :

    public function index()
    {
        return response([
            'posts' => new PostCollection(Post::with('photo')->orderBy('created_at', 'desc')->paginate(9)),
        ], 200);
    }

یک متد هم در کامپونتت post دارم به این صورت

    getPosts(page = 1) {
                axios.get('/api/posts?page=' + page)
                    .then(({data}) => {
                        this.posts = data.posts;
                    })
            },

و همچنین data برابر

data() {
            return {
           posts: {},

            }
        },

اطلاعاتی که در این آدرس http://blog.test/api/posts دریافت میکنم به این صورت

  "posts": {
    "id": 3,
    "title": "Meysam Ebrahimi",
    "slug": "meysam-ebrahimi",
    "user_id": 1,
     "photos": [
      {
        "id": 1,
        "path": "JARxe4UqIXklFiSYtQ3g.jpeg",
        "post_id": 3,
        }
    ]
  },

سوالم اینجاست به چه صورت اطلاعات path که در "photo": هست دریافت کنم ؟

       data() {
            return {
                posts: {},
                currentPhoto: {
                    index: 0,
                    src: '',
                }

            }
        },
        created() {
            this.currentPhoto.src = this.posts[this.currentPhoto.index].???;

            this.getPosts();
        },