Vue how to group items in v-for loop

Question

I have an array of objects, which contains menu's from a restaurant, where the user can choose a timeslot where the menu can be delivered.

here is an example of a menu object:

{
  date: '2022-02-10',
  slots: [
     {
       stock: 10,
       start: '06:00',
       end: '08:00',
     },
     {
       stock: 8,
       start: '10:00',
       end: '12:00',
     },
     {
       stock: 3,
       start: '12:00',
       end: '14:00',
     },
     {
       stock: 3,
       start: '14:00',
       end: '16:00',
     },
     {
       stock: 3,
       start: '16:00',
       end: '18:00',
     },
     {
       stock: 20,
       start: '18:00',
       end: '20:00',
     },
     {
       stock: 8,
       start: '20:00',
       end: '22:00',
     },
  ],
},

and here is how I render them:

<div v-for="(slot, index) in slots" :key="index">
   <input type="radio" :id="index" name="slot" />
   <label :for="index">
        {{ slot.start.slice(0, 2) }} - {{ slot.end.slice(0, 2) }}
   </label>
</div>

so far so good. Now I want to group the timeslots into "morning", "afternoon" and "evening" based on the time and display them like this:

Morning
06 - 08    10 - 12

Afternoon
12 - 14    14 - 16   16 - 18

Evening
18 - 20   20 - 22

How can I achieve that??

Thanks in advance...