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}}

<template>
    <div>
        <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="product.name + ' Microscope'">
                            <div class="p-6">
                                <h2 class="tracking-widest text-xs title-font font-medium text-gray-500 mb-1">
                                    {{title}}
                                </h2>
                                <h1 class="title-font text-lg font-medium text-white mb-3">
                                    {{ product.name }}
                                </h1>
                                <ul class="list-disc pl-5">
                                    
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                title: 'Inverted Microscopes',
                products: [{
                        img: 'https://www.magnusopto.com/pub/media/catalog/product/cache/058ef48c3d1e6c9d031a03a4ffde2954/m/a/magnus-microscopes-fl-inverse-led.png',
                        name: 'FL Inverse',
                        list: [
                            {item:'1'},
                            {item:'2'},
                            {item:'3'},
                        ]
                    },
                ]
            }
        },
        head() {
            return {
                title: this.title,
                meta: [{
                    hid: '',
                    name: '',
                    content: ''
                }]
            }
        }
    }
</script>

Answer

Create a nested v-for loop like this:

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

Fully working example: Vue SFC Playground