Nested v-for loops and incorrect data placement

I got some complex (ugly!) data from a backend API (JSON) and I am trying to display it correctly in an HTML table. There are ordered list items that are not in their correct slots in the table.

For example, notice in the screenshot how the 2.1, 2.2, etc items are placed under the 1.. It should be moved down one slot to their respective numbered list. I understand that the data from the API is incorrect also. I am looking for a presentational fix to this.

I've also attached a gist for view of the code with the actual JSON data. Gist: https://gist.github.com/dosstx/f7e40117cda53605e6d9bf448b3cb6b6

Any ideas how to fix?

<template>
<div>

  <table>
    <!-- <tr v-if='eg[0].type == "ExREF"'> -->
      <tr>
      <th>General:</th>
      <td>
        <ol><li v-for='(item, index) in eg' v-if='item.type == "ExREF"' :key='index'></li></ol>
      </td>
    </tr>
    <tr>
      <th>Considerations:</th>
      <td>
        <ol>
          <li v-for='(item, index) in eg' v-if='item.type == "Extract"' :key='index'>
            
            <ol>
              <li v-for='(a, index) in item.Nodes' :key='index' type='a'>
                <em></em> 
                  <ol>
                    <li v-for='(i, index) in a.Nodes' :key='index' type='i'>
                      <em></em>
                    </li>
                  </ol>
              </li>
            </ol>
          </li>
        </ol>
      </td>
    </tr>
  </table>

</div>
</template>

from Nested v-for loops and incorrect data placement