Почему выдает ошибку из-за компонента?

Question

Vova135798 @Vova135798

Vue.js

Почему выдает ошибку из-за компонента?

Все работало корректно, пока я не решил вынести товар в отдельный компонент. После того, как я это сделал, выдает ошибку

WARNING in ./resources/js/views/Index.vue?vue&type=template&id=494d9643& (./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib/index.js??vue-loader-options!./resources/js/views/Index.vue?vue&type=template&id=494d9643&)
Module Warning (from ./node_modules/vue-loader/lib/loaders/templateLoader.js):
(Emitted value instead of an instance of Error) <product v-for="product in products">: component lists rendered with v-for should have explicit keys. See https://vuejs.org/guide/list.html#key for more info.
webpack compiled with 1 warning

<template>
    <spin v-if="loading"></spin>
    <div v-else class="product-list">
        <product
            v-for="product in products"
            :title="product.title" 
            :price="product.price"
        />
    </div>
</template>

<script>
    import Spin from "../components/spin.vue";
    import Product from "../components/Product.vue";
    import axios from "axios";

    export default {
        components: {
            Spin,
            Product,
        },
        data: () => ({
            loading: true,
            products: [],
        }),
        mounted() {
            this.loadProducts();
        },
        methods: {
            loadProducts() {
                axios.get("/api/products").then(res => {
                    this.products = res.data;
                    setTimeout(() => {
                        this.loading = false;
                    }, 500);
                });
            },
        },
    };

</script>

<style>

.product-list{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
}
.product{
    margin: 0 15px 20px;
    flex: 0 1 calc( 20% - 30px );
    display: block;
    font-size: 16px;
}
.product-photo{
    position: relative;
}
.product-photo form button{
    position: absolute;
    border: none;
    background: #fff;
    cursor: pointer;
    right: 1%;
}
.product-bottom{
    display: flex;
    flex-direction: row;
    position: relative;
    height: 40px;
    align-items: center;
}
.product-price{
    width: 50%;
}
.product-button{
    width: 50%;
}
.product-button button{
    width: 40px;
    height: 40px;
    background-color: rgb(118, 188, 33);
    cursor: pointer;
    border: none;
    position: absolute;
    top: 0.1px;
    right: 0.1px;
    color: #fff;
}
.product-button button:hover{
    background-color: #bbe983;
}
</style>

<template>
     <div class="product">
            <div class="product-photo">
                <img src="https://loremflickr.com/210/210" alt="" width="210px" height="210px" />
            </div>
            <div class="product-content">
                <span class="product-title">{{ title }}</span>
                <div class="product-bottom">
                    <div class="product-price">
                        {{ price }}
                    </div>
                    <div class="product-button">
                        <form action="#" method="post">
                            <input type="hidden" name="id" value="">
                            <button type="submit">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                    class="bi bi-cart-plus" viewBox="0 0 16 16">
                                    <path
                                        d="M9 5.5a.5.5 0 0 0-1 0V7H6.5a.5.5 0 0 0 0 1H8v1.5a.5.5 0 0 0 1 0V8h1.5a.5.5 0 0 0 0-1H9V5.5z" />
                                    <path
                                        d="M.5 1a.5.5 0 0 0 0 1h1.11l.401 1.607 1.498 7.985A.5.5 0 0 0 4 12h1a2 2 0 1 0 0 4 2 2 0 0 0 0-4h7a2 2 0 1 0 0 4 2 2 0 0 0 0-4h1a.5.5 0 0 0 .491-.408l1.5-8A.5.5 0 0 0 14.5 3H2.89l-.405-1.621A.5.5 0 0 0 2 1H.5zm3.915 10L3.102 4h10.796l-1.313 7h-8.17zM6 14a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm7 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0z" />
                                </svg>
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
</template>

<script>
export default {
    props: {
        title: {
            type: Srting,
            default: "NULL",
        },
        price: {
            type: Srting,
            default: "NULL",
        }
    }
}
</script>

<style>
    .product{
    margin: 0 15px 20px;
    flex: 0 1 calc( 20% - 30px );
    display: block;
    font-size: 16px;
}
.product-photo{
    position: relative;
}
.product-photo form button{
    position: absolute;
    border: none;
    background: #fff;
    cursor: pointer;
    right: 1%;
}
.product-bottom{
    display: flex;
    flex-direction: row;
    position: relative;
    height: 40px;
    align-items: center;
}
.product-price{
    width: 50%;
}
.product-button{
    width: 50%;
}
.product-button button{
    width: 40px;
    height: 40px;
    background-color: rgb(118, 188, 33);
    cursor: pointer;
    border: none;
    position: absolute;
    top: 0.1px;
    right: 0.1px;
    color: #fff;
}
.product-button button:hover{
    background-color: #bbe983;
}
</style>