Problem accessing an object with an object in vue js - vue.js

Question

I have a products table and images table. A product can have multiple images. Now I want to get just one product and display it in view. I am able to get the whole object but when I display it the image part displays the whole object. How can I get the inner values.
My Vue Code
<div v-for="product in Products.data" :key="product.id" class="p-2">
<div class="item p-2">{{product.id}}</div>
<div class="item p-2">{{product.title}} Price:{{product.price}} </div>
<div class="item p-2"><p>Loc:{{product.location}}</p></div>
<div class="item p-2"><p>image:{{product.images[0]}}</p></div>
<div class="item p-2">
<a class="btn btn-primary btn-sm" :href="'/products/'+product.id">View</a>
</div>
Script
export default {
data() {
return {
Products: {
images: []
},
id: '',
name: ''
}
},
What am getting, the results:
10
Bedsitter Price:6000
Loc: Opposite GG Apartment
image:{ "id": 16, "title": "26f16f925b189465.jpg", "filename": "26f16f925b189465.jpg", "created_at": "2021-01-24T16:12:35.000000Z", "updated_at": "2021-01-24T16:12:35.000000Z", "pivot": { "products_id": 10, "images_id": 16 } }