Why is the content of tbody rendered above thead?

Question

HTML

I am developing a Laravel application using Vue.
I ran into a problem: in tbody I call a component, which in turn returns the records I need. As a result, the content of tbody is above thead, I don't know how else to put it.


And here's what it should look like:


The code itself.

@extends('layouts.app')
@section('content')
<table class="table mb-0">
                    <thead>
  <tr style="cursor:default!important" class="polew">
                        <th style="width:20%" >Игрок</th>
                        <th>Число</th>
                        <th>Цель</th>
                        <th style="width:14%">Сумма</th>
                        <th>Шанс</th>
                        <th>Выигрыш</th>
                      </tr>
                    </thead>
                    
                    <tbody>
 <chat-games :games="games"></chat-games>	
                    	 </tbody>
  </table>
@endsection

Component:

<template>
 
<div>
     <tr v-for="game in games" :game="games">
       
      <td class="text-truncate " style="font-weight:600">{{ game.user.name }}</td>
      <td class="text-truncate success" style="font-weight:600">{{ game.number }}</td>
      <td class="text-truncate " style="font-weight:600">0 - 774399</td>
      <td class="text-truncate " style="font-weight:600">{{ game.bet }} N</td>
      <td class="text-xs-center font-small-2"><span>
        <progress style="margin-top:8px" class="progress progress-sm progress-success mb-0" value="77.44" max="100"></progress></span></td>
        <td class="text-truncate success " style="font-weight:600">{{ game.bet }} N</td>
         
      </tr>     </div>
</template>

<script>
  export default {
    props: ['games']
  };
</script>

app.js:

require('./bootstrap');
window.Vue = require('vue');
Vue.component('chat-games', require('./components/ChatGames.vue').default);

const app = new Vue({
    el: '#app',

    data: {
        games: []
    },

    created() {
        this.fetchGames();
       window.Echo.channel('chat')
  .listen('GameSent', (e) => {
    this.games.push({
      game: e.game.game,
      user: e.user
    });
  });

    },

    methods: {
        fetchGames() {
            axios.get('/games').then(response => {
                this.games = response.data;
            });
        },

        addGame(game) {
            this.games.push(game);

            axios.post('/games', game).then(response => {
              console.log(response.data);
            });
        }
    }
});

Answer 1

Because it is invalid for <tbody>- read the documentation more carefully.
Well, actually what to do. For example: replace div with tbody in the chat-games component, and in the parent do this:
<tbody is="chat-games" :games="games"></tbody>

Answer 2

What's the div on top of the tr?

<div>
     <tr v-for="game in games" :game="games">

you can not do it this way. If you want to group properties, use the template tag, but you don't need to group anything there, leave the tr as it is, remove the div.
UPD: the template tag doesn't work inside a template, so the solution is to just put the tbody inside the component.