[Vuejs]-Access Nested Objects in v-for Loop

I used your code

           types:[
                {
                    id: 6,
                    typeTitle: 'Type Title goes here',
                    typeImg: 'Some image',
                    typeLink: 'https://www.somewebsite.com',
                    publishDate: 'Apr 24, 2020',
                    typeAuthor: {
                    id: 3,
                    authorName: 'Pat wilson',
                    created_at: '2020-04-24T14:03:54.140Z',
                    updated_at: '2020-04-24T14:03:54.140Z'
                    },
                    stage: {
                    id: 1,
                    stageTitle: 'Revolve Stage',
                    created_at: '2020-04-24T14:11:55.364Z',
                    updated_at: '2020-04-24T14:11:55.364Z'
                    },
                    created_at: '2020-04-24T13:56:01.607Z',
                    updated_at: '2020-04-24T14:17:13.543Z',
                    categories: []
                }
        ]


                        <div v-for="(type, index) in types" :key="index">
                        <div>
                            <img :src="type.typeImg" />
                            <div>
                                <p>{{type.typeTitle}} </p>

                                <p>{{type.typeAuthor.authorName}}</p>
                                <div>
                                    <template v-for="cat in type.categories">
                                        <span :key="cat.categoryName"> 
                                   {{cat.categoryName}}</span>
                                    </template>
                                </div>
                            </div>
                        </div>
            </div>

He gave me the desired result and the value appeared