JSFiddle - React, Tailwind, and code Playground

HTML

<div id="vue">
  <div v-for="events, day in groupedEvents">
    <h2>{{day == today ? 'Today' : day}}</h2>
    <div v-for="event in events">
      {{event.date.toLocaleTimeString()}}
    </div>
  </div>
</div>

CSS

h2{
  text-align:center;
}
#vue div{
  padding:10px;
  margin:5px;
  box-shadow:0px 1px 4px #888;
}

JavaScript

function groupBy(array, fn){
	let result = {}
  array.forEach(item => {
  	let key = fn(item)
    if(!result[key]){
    	result[key] = []
    }
    result[key].push(item)
  })
  return result
}

let events = []
let hour = 1000 * 60 * 60
for(let i = 0; i < 20; i+= Math.random()){
  events.push({date:new Date(Date.now() + i * 12 * hour)})
}

new Vue({
	el:'#vue',
  data(){
  	return {
    	events,
      today:new Date().toDateString()
    }
  },
  computed:{
  	groupedEvents(){
    	return this.events, event => event.date.toDateString())
    }    
  }
})