Use V-IF and V-FOR in a HTML table (VUE3)

Hello guys I'm currently working on an Monitoring application for my company. So I'm trying to use V-if and V-for in a table My code looks like this:

   <tbody  v-for="server in servers" :key="server.Id">
      <tr v-if="server.Show == true">{{DATA}}</tr>

If you click the red eye on the left side you can hide an Server, but it leaves the line there what it is not supposed to do. If I resize the window it'll correct it. Is there a nicer way to bring my data into the Tablebox because now I'm creating a new tablebody for each server

I'm still a student and pretty new to VUE so I hope someone can give me an explanation why this is happening.

EDIT: Spelling and a little bit of more Info

I should loop over the servers in a template and hide the row inside

<tbody>
  <template v-for="(server, index) in servers">
      <tr :key="server.Id" v-if="server.Show">{{DATA}}</tr>
        <td>
          <img src="../assets/eye.png" @click="HideServer(server,index)" />
        </td>
      </tr>
   </template>
</tbody>

If I'm understanding you, you want to make the same without tbody tag? In this case, you can replace tbody with template tag, this tag won't be rendered, it would be the same than make v-for and v-if at the same line.

<template  v-for="server in servers">
  <tr v-if="server.Show == true" :key="server.Id">{{DATA}}</tr>

Try to use the index to modify the corresponding item :

 <tbody  v-for="(server,index) in servers" :key="server.Id">
      <tr v-if="server.Show == true">.....
        <img src="../assets/eye.png" @click="HideServer(server,index)" /></td>

  
HideServer(server,index) {
  this.servers[index]={...server,Show : false}

 }