DatasetItem and get values from nested json array

[pakian11]

Hi, I had this vue-dataset of yours to get the values to display the table of array of json data, and it looks great. Then I tried to get the data in sub_title_2 that is the nested json array to display as a table using the feature similar to 'DatasetItem' as a new .vue file to add some v-for in the child node, but failed to do so. Is there a way how to get this feature work a bit for nested json data structure like this?

nested json data structure

[{
    "id": 1,
    "title": "Salad",
    "sub_title": [{
        "id": 11,
        "title": "size",
        "sub_title_2": [{
             "id": 111,
             "title": "size S"
             "publication_date": "2017-08-28",
             "year": 2560
          },
          {
             "id": 112,
             "title": "size M"
             "publication_date": "2017-09-28",
             "year": 2560
          }]
      }]
},
{
    "id": 2,
    "title": "Meat",
    "sub_title": [{
        "id": 21,
        "title": "size",
        "sub_title_2": [{
             "id": 211,
             "title": "size S"
             "publication_date": "2017-08-28",
             "year": 2560
          },
          {
             "id": 212,
             "title": "size M"
             "publication_date": "2017-09-28",
             "year": 2560
          },
          {
             "id": 213,
             "title": "size L"
             "publication_date": "2017-10-28",
             "year": 2560
          }]
      }]
}]

DatasetNestedItem.vue

<template>
  <component :is="tag">
    <template v-for="(rowIndex, i) in dsRows">
      <slot :row="dsData[rowIndex]" :row-index="rowIndex" :index="indexes[i]"></slot>
      <template v-for="(rowIndex2, j) in i.sub_title">
        <slot :row2="dsData[rowIndex2]" :row-index="rowIndex2" :index="indexes[j]"></slot>
      </template>
    </template>
    <slot v-if="!dsRows.length" name="noDataFound"></slot>
  </component>
</template>

And this is how I created the table

<table class="table table-striped d-md-table">
<thead>
    < tr >
      < th scope="col">Title</ th>
      < th scope="col">Date</ th>
      < th scope="col">Year</ th>
    </ tr >
</thead>
<dataset-nested-item class="form-row mb-3" tag="tbody">
  <template #default="{ row2, rowIndex2 }">
    <tr>
       <td>{{ row2.sub_title_2.title }}</td>
       <td>{{ isoDateToEuroDate(row2.sub_title_2.publication_date) }}</a></td>
       <td>{{ row2.sub_title_2.year }}</td>
    </tr>
  </template>
</dataset-nested-item>
</table>

Suggestions will be great help. Thanks