Vue js как выполнить итерацию Объекта Объектов для доступа и отображения деталей элементов внутри него из тега html

Question

Добрый день, разработчики. В этой корзине магазина у меня возникла небольшая проблема с итерацией по объекту, который я получил в качестве конечного результата, как только я добавил товары в корзину и сгруппировал их по именам. В основном, используя функцию Reduce, я объединяю все продукты одного типа (названия) в соответствующих группах. Но попытка получить oop в этой группе из моего тега html, чтобы найти имя или цену, не увенчалась успехом. вот что я сделал:

Сначала образец моего Json объекта:

{
  "Chucky": [
    {
      "product_name": "Chucky",
      "product_price": 153.4
    },
    {
      "product_name": "Chucky",
      "product_price": 153.4
    }
  ],
  "Glasses": [
    {
      "product_name": "Glasses",
      "product_price": 10.4
    },
    {
      "product_name": "Glasses",
      "product_price": 10.4
    }
  ]
}

, затем на моем теге html я объявляю итерацию над этим объектом, чтобы соответствовать карта для каждой из этих групп элементов, претендующая на доступ к названию и цене. Допустим,

<template>
    <v-container>

        <v-container
          v-for="(item, key,index) in  groupProds " :key="index">
           <v-card >
               <h3 style="font-size:10px;margin-left:10px;">{{item[0].product_name}}</h3>
               <h3 style="font-size:14px;margin-left:10px;width:200px;">Price: ${{item[0].product_price}}</h3>

.......More code

Но никакого результата не видно, кроме только карт без информации

Любые советы по поводу Как я могу улучшить это для лучшего пути? Заранее спасибо !!! И хорошего вам дня !!