How do I iterate through a array of object which is inside an object as a list in v-for

I want to make a product section with image and a name (title) and li(description) how to iterate through item 1,2,3 in products array such that it shows in li so I can make different objects for different products it doesn’t seem to work when I do {{item.list}}

        <section class="text-gray-400 bg-gray-900 body-font">
            <div class="container px-5 py-24 mx-auto">
                <div class="flex flex-wrap -m-4">
                    <div v-for="(product, name) in products" :key="name" class="p-4 md:w-1/3">
                        <div class="h-full border-2 border-gray-800 rounded-lg overflow-hidden">
                            <img class="lg:h-48 md:h-36 w-full object-cover object-center" :src="product.img"
                                :alt=" + ' Microscope'">
                            <div class="p-6">
                                <h2 class="tracking-widest text-xs title-font font-medium text-gray-500 mb-1">
                                <h1 class="title-font text-lg font-medium text-white mb-3">
                                    {{ }}
                                <ul class="list-disc pl-5">

    export default {
        data() {
            return {
                title: 'Inverted Microscopes',
                products: [{
                        img: '',
                        name: 'FL Inverse',
                        list: [
        head() {
            return {
                title: this.title,
                meta: [{
                    hid: '',
                    name: '',
                    content: ''


Create a nested v-for loop like this:

<li v-for="item in product.list">{{item.item}}</li>

Fully working example: Vue SFC Playground