tag does not follow with the data loop

I am new to vue and currently working on a project that will load data from database and display it in a table. There are 9 table headers under tag and under the will have the v-for loop that will load the data from database (please refer to the code below). However, the data was successfully loaded but it does not load to the next column that follows the table header (please refer to the image below). Any suggestion on what to do for this? Thank you.

P.S. I have tried to do some research but none provide me the answer that I am looking for as I did 3 layers of nested v-for loop.

This is how the data being loaded, but everything is put under the "agency" column

These are the respective columns that these data should be appended into but it is empty due to the misconfiguration

<thead>    <tr>      <th scope="col">        Agency      </th>      <th>        Ref No      </th>      <th>        Document Type      </th>      <th>        Category      </th>      <th>        Description      </th>      <th>        Submission      </th>      <th>        Starting Date      </th>      <th>        Closing Date      </th>      <th>        Action      </th>    </tr>  </thead>  <tbody>      <div v-for="values in objects">          <div v-for="value in values">              <tr v-for="item in value">                  <td scope="col">  </td>                  <td scope="col">  </td>                  <td scope="col">  </td>                  <td scope="col">  </td>                  <td scope="col">  </td>                  <td scope="col">  </td>                  <td scope="col">  </td>                  <td scope="col">  </td>                  <td scope="col">                      <a :href="item.link" target="_blank"> View </a>                  </td>              </tr>          </div>      </div>  </tbody>

https://stackoverflow.com/questions/66631866/th-tag-does-not-follow-with-the-data-loop March 15, 2021 at 11:06AM