Laravel Blade rendering table inside table with VueJS - laravel

Question

I have this scenario working with Laravel blade view:
#foreach($event->drawingrequests as $drawing)
<tr>
<td>{{ $drawing->field1 }}</td>
<td>{{ $drawing->field2 }}</td>
<td>{{ $drawing->field3 }}</td>
<td>{{ $drawing->field4 }}</td>
<td>{{ $drawing->field5 }}</td>
<td>{{ $drawing->field6 }}</td>
<td>{{ $drawing->field7 }}</td>
</tr>
#if(count(drawing->childs) > 0)
<tr><td colspan="7">
<table class="table">
<tbody>
#foreach(drawing->childs as $stage)
<tr>
<td>{{ $stage->field1 }}</td>
<td>{{ $stage->field2 }}</td>
<td>{{ $stage->field3 }}</td>
<td>{{ $stage->field4 }}</td>
<td>{{ $stage->field5 }}</td>
</tr>
#endforeach
</tbody>
</table>
</td></tr>
#endif
#endforeach
I can I do it on VueJS??? The main question here in, on VueJs conditions are always connected to DOM elements.. I need to create other tr when childs > 0. And I need to check this condition on each drawing.
<tr v-for="drawing in eventdetail.event.drawingrequests">
<td>#{{ drawing.field1 }}</td>
<td>#{{ drawing.field2 }}</td>
<td>#{{ drawing.field3 }}</td>
<td>#{{ drawing.field4 }}</td>
<td>#{{ drawing.field5 }}</td>
<td>#{{ drawing.field6 }}</td>
<td>#{{ drawing.field7 }}</td>
</tr>
#if(drawing.childs > 0)
<tr>
<td colspan="7">
<table class="table">
<tbody>
<tr v-for="stage in drawing.childs">
<td>#{{ stage.field1 }}</td>
<td>#{{ stage.field2 }}</td>
<td>#{{ stage.field3 }}</td>
<td>#{{ stage.field4 }}</td>
<td>#{{ stage.field5 }}</td>
</tr>
</tbody>
</table>
</td>
</tr>
#endif

Answer 1

Found the solution:
<template v-for="drawing in eventdetail.event.drawingrequests">
<tr>
<td>#{{ drawing.field1 }}</td>
<td>#{{ drawing.field2 }}</td>
<td>#{{ drawing.field3 }}</td>
<td>#{{ drawing.field4 }}</td>
<td>#{{ drawing.field5 }}</td>
<td>#{{ drawing.field6 }}</td>
<td>#{{ drawing.field7 }}</td>
</tr>
<tr v-if="drawing.childs > 0">
<td colspan="7">
<table class="table">
<tbody>
<tr v-for="stage in drawing.childs">
<td>#{{ stage.field1 }}</td>
<td>#{{ stage.field2 }}</td>
<td>#{{ stage.field3 }}</td>
<td>#{{ stage.field4 }}</td>
<td>#{{ stage.field5 }}</td>
</tr>
</tbody>
</table>
</td>
</tr>
</template>
Reference link:
Vue: Displaying nested data in a table