<div id="hello-vue">
  <div class="table">

    <div class="table-tr">
      <div class="table-th">ID</div>
      <div class="table-th">User</div>
    </div>

    <div>
      <div class="table-tr" v-for="item in items" :key="item.id">
        <div class="table-td">{{ item.id }}</div>
        <div class="table-td">{{ item.user }}</div>
      </div>
    </div>

  </div>
</div>

.table {
  border: solid 1px silver;
  width: 300px;
  display: table;
  padding: 7px;
}

.table-th {
  background: silver;
}

.table-tr , .table-th {
  border: solid 1px silver;
  display: flex;
  margin: 7px;
  padding: 5px;
}

.table-td {
  border: solid 1px silver;
  padding: 5px;
  margin: 5px;
  animation: 1s ease-out 0s 1 slideInFromLeft;
}

@keyframes slideInFromLeft {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0);
  }
}

const HelloVueApp = {
  created() {

    let getMockData = function (i) {
      return {
        id: i,
        user: 'User_' + i,
      }
    }

    let totalCounter = 10;
    let count = 10;
    for (let i = 0; i < count; i++) {
      this.items.push(getMockData(count - i));
    }


   setInterval(() => {
      this.items.unshift(getMockData(1 + totalCounter++));
      this.items.pop();
    }, 1500);


  },
  data() {
    return {
      items: [    
      ]
    }
  }
}

Vue.createApp(HelloVueApp).mount('#hello-vue')