Sorting table by project - vue.js

Question

I have an object that looks like this
projects: Object
Admin: Object
Project 1: Array[1]
0: Object
name: Admin Project 1
description: Admin Project 1 Description
Project 2: Array[2]
0: Object
name: Admin Project 2 part 1
description: Admin Project 2 part 1 Description
1: Object
name: Admin Project 2 part 2
description: Admin Project 2 part 2 Description
And what I'm trying to do is to display this information on a table.
The issue I'm having is that because of the way I'm creating the table I'm not able to group them by their sub category (EG: Project 2).
So my table would look like this.
Codepen of how I want it to look like
This is how it is looking like at the moment.
Codepen of the wrong way the table looks like
Here is my code
<table class="table table-bordered table-sm" style="width: 100%" v-for="(value, key) in projects">
<tbody>
<tr style="font-size: 90%; background: #a0a0a0; color: #fafafa; font-weight: normal">
<th colspan="8" style="text-indent: 8px;">{{key}}</th>
</tr>
<tr style="font-size: 90%; background: #d0d0d0; color: #606060;" v-for="(v, k) in value">
<th colspan="7" style="text-indent: 32px;">{{ k }}</th>
</tr>
</tbody>
<tbody>
<tr v-for="(p, kk) in value">
<td>
<table>
<tr v-for="vp in p">
<td>{{ vp.name }}</td>
<td>{{ vp.description }}</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>

Answer 1

The tbody elements are structurize themselves below each other (see table)
If you add the contents of the projects inside the same tbody element as additional rows it should work:
<div id="app">
<table class="table table-bordered table-sm" style="width: 100%" v-for="(value, key) in projects">
<thead>
<tr style="font-size: 90%; background: #a0a0a0; color: #fafafa; font-weight: normal">
<th colspan="8" style="text-indent: 8px;">{{key}}</th>
</tr>
</thead>
<tbody v-for="(v, k) in value">
<tr style="font-size: 90%; background: #d0d0d0; color: #606060;">
<th colspan="7" style="text-indent: 32px;">{{ k }}</th>
</tr>
<tr v-for="vp in v">
<td>{{ vp.name }}</td>
<td>{{ vp.description }}</td>
</tr>
</tbody>
</table>
</div>
EDIT: I update the code to use multiple tbody elements and a thead for the object root – should be semantically more correct I think.

Answer 2

This happens because all your for loop have to be imbricated inside parent divs
Here is a much simpler example using only div.
new Vue({
el: "#app",
data: {
projects: {
Admin: {
'Project 1': [
{name: 'Admin Project 1', description: 'Admin Project 1 Description'}
],
'Project 2': [
{name: 'Admin Project 2 part 1', description: 'Admin Project 2 part 1 Description'},
{name: 'Admin Project 2 part 2', description: 'Admin Project 2 part 2 Description'}
]
}
}
},
methods: {
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div v-for="(value, key) in projects">
{{key}}
<div v-for="(value2, key2) in value">
{{key2}}
<div v-for="(value3) in value2">
{{value3.name}} - {{value3.description}}
</div>
</div>
</div>
</div>
So in your case you have to think to another model of data.

Answer 3

Observations :
You forget to add :key attribute for each iteration. That is a good practice and helps in rendering the DOM.
You added one extra iteration in your code which causes the issue in displaying the table properly.
Working Demo :
new Vue({
el: "#app",
data: {
projects: {
Admin: {
'Project 1': [
{name: 'Admin Project 1', description: 'Admin Project 1 Description'}
],
'Project 2': [
{name: 'Admin Project 2 part 1', description: 'Admin Project 2 part 1 Description'},
{name: 'Admin Project 2 part 2', description: 'Admin Project 2 part 2 Description'}
]
}
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<table class="table table-bordered table-sm" style="width: 100%" v-for="(value, key) in projects" :key="key">
<thead>
<tr style="font-size: 90%; background: #a0a0a0; color: #fafafa; font-weight: normal">
<th colspan="8" style="text-indent: 8px;">{{key}}</th>
</tr>
</thead>
<tbody v-for="(v, i) in Object.keys(value)" :key="i">
<tr style="font-size: 90%; background: #d0d0d0; color: #606060;">
<th colspan="7" style="text-indent: 32px;">{{ v }}</th>
</tr>
<tr v-for="(p, ii) in value[v]" :key="ii">
<td>
<table>
<tr>
<td>{{ p.name }}</td>
<td>{{ p.description }}</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</div>