[Vuejs]-Is there a way to make v-if work in v-for to render a template dynamically to create sub-table?

If possible try this code.

<div v-for="item in detailList" class="item--detailed">
<table>
    <thead>
        <tr>
            <th>
                Date
            </th>
            <th>
                {{item.creationDate}}
            </th>
        </tr>
        <tr>
            <th></th>
            <th>
                Payment Methods
            </th>
            <th>
                Count
            </th>
        </tr>
    </thead>
    <tbody>

            <tr v-for="jsonItem in item.jsonData.paymentMethods">
                <td></td>
                <td>
                    {{jsonItem.ID}}
                </td>
                <td>
                    {{jsonItem.orderCount}}
                </td>

                <td>
               <template v-if="jsonItem.orderCount > 0">
                <table>
                    <thead>
                        <th>Order ID</th>
                        <th>Creation Date</th>
                        <th>Status</th>
                    </thead>
                    <tbody>
                        <tr v-for="orderItem in jsonItem.orders">
                            <td>{{orderItem.orderId}}</td>
                            <td>{{orderItem.creationDate}}</td>
                            <td>{{orderItem.status}}</td>
                        </tr>
                    </tbody>
                </table>
              </template>
              <template v-else>
                There is no order created.
              </template>
              </td>

            </tr>


    </tbody>
</table>