JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.2/tailwind.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <div id="vue-app" class="w-full">
      <!-- {{event}} -->
      <!-- {{tData}} -->
      <!-- {{finalevents}} -->
      <!-- <h1 @click="testslot">TEST EVENT</h1>
      <h1 @click="testslotdates">TEST DATES</h1> -->
<h1 class="text-3xl">Пример 1</h1>
 <table class="w-full border border-green-800">
                <!-- {{caldata}} -->
                <thead>
                    <th width="125">Time</th>
                        <th> Name  </th>
                        <th> E-mail  </th>
                </thead>
                <tbody>
                        <tr v-for="slot in timeslots2">
                            <td>
                                {{ slot.slot }} 
                            </td>
                            <td> {{slot.event.name}}</td>
                            <td> {{slot.event.email}}</td>
                            <!-- <td>
                            и тут не получается в ячейку ячейки - тупость
                               <timeslot :event="timeEvent(slot)"></timeslot>
                            </td> -->
                          

                        </tr>
                </tbody>
            </table>
<h1 class="text-3xl">Пример 2</h1>
      <form action="">
          <input type="text" name="" id="" v-model="event.title">
          <input type="date" name="" id="" v-model="event.day">
          <input type="text" name="" id="" v-model="event.start">
      </form>
      <button @click="next">NEXT</button>
      <button @click="prev">PREV</button>
      <button @click="nextMonth">NEXT MONTH</button>
      <button @click="prevMonth">PREV MONTH</button>
      <table class="w-full border border-green-800">
                <!-- {{caldata}} -->
               ...

CSS

table, th, td {
  border: 1px solid black;
}

Vue

//для примера 1
Vue.component('timeslot', {
  template: '<div><td> {{event.name}}</td><td>{{event.email}}</td></div>',
  props:{
  'event':[Object, Array]
  }
});
//для Примера 2
Vue.component('events', {
  template: '<div><h1 class=" bg-red-100 border border-blue-800" v-for="event in events" :key="event.title">{{event.title}}</h1></div>',
  props:{
  'events':Array
  }
});
new Vue({
	el: '#vue-app',
   created() {
       this.fillDaySlots()
   },    
   data: {

            caldata:{ "08:00 - 08:20": [ 0, 0, 0, 0, 0, 0, 0 ], "08:20 - 08:40": [ 0, 0, 0, 0, 0, 0, 0 ], "08:40 - 09:00": [ 0, 0, 0, 0, 0, 0, 0 ], "09:00 - 09:20": [ 0, 0, 0, 0, 0, 0, 0 ], "09:20 - 09:40": [ 0, 0, 0, 0, 0, 0, 0 ], "09:40 - 10:00": [ 0, 0, 0, 0, 0, 0, 0 ], "10:00 - 10:20": [ 0, 0, 0, 0, 0, 0, 0 ], "10:20 - 10:40": [ 0, 0, 0, 0, 0, 0, 0 ], "10:40 - 11:00": [ 0, 0, 0, 0, 0, 0, 0 ], "11:00 - 11:20": [ 0, 0, 0, 0, 0, 0, 0 ], "11:20 - 11:40": [ 0, 0, 0, 0, 0, 0, 0 ], "11:40 - 12:00": [ 0, 0, 0, 0, 0, 0, 0 ], "12:00 - 12:20": [ 0, 0, 0, 0, 0, 0, 0 ], "12:20 - 12:40": [ 0, 0, 0, 0, 0, 0, 0 ], "12:40 - 13:00": [ 0, 0, 0, 0, 0, 0, 0 ], "13:00 - 13:20": [ 0, 0, 0, 0, 0, 0, 0 ], "13:20 - 13:40": [ 0, 0, 0, 0, 0, 0, 0 ], "13:40 - 14:00": [ 0, 0, 0, 0, 0, 0, 0 ], "14:00 - 14:20": [ 0, 0, 0, 0, 0, 0, 0 ], "14:20 - 14:40": [ 0, 0, 0, 0, 0, 0, 0 ], "14:40 - 15:00": [ 0, 0, 0, 0, 0, 0, 0 ], "15:00 - 15:20": [ 0, 0, 0, 0, 0, 0, 0 ], "15:20 - 15:40": [ 0, 0, 0, 0, 0, 0, 0 ], "15:40 - 16:00": [ 0, 0, 0, 0, 0, 0, 0 ], "16:00 - 16:20": [ 0, 0, 0, 0, 0, 0, 0 ], "16:20 - 16:40": [ 0, 0, 0, 0, 0, 0, 0 ], "16:40 - 17:00": [ 0, 0, 0, 0, 0, 0, 0 ], "17:00 - 17:20": [ 0, 0, 0, 0, 0, 0, 0 ], "17:20 - 17:40": [ 0, 0, 0, 0, 0, 0, 0 ], "17:40 - 18:00": [ 0, 0, 0, 0, 0, 0, 0 ], "18:00 - 18:20": [ 0, 0, 0, 0, 0, 0, 0 ], "18:20 - 18:40": [ 0, 0, 0, 0, 0, 0, 0 ], "18:40 - 19:00": [ 0, 0, 0, 0, 0, 0, 0 ] },
            weekdays:{ "1": "Monday", "2": "Tuesday", "3": "Wednesday", "4": "Thursday", "5": "Friday", "6":...