How to dynamically substitute values ​​into an already prepared vue table?

Question

Vue.js

I'll try my luck, suddenly someone wants to help with advice.
Don't kick too hard for the fiddle, I understand that it's a mess. Posted to clearly show what I want to achieve in the end.

There are 3 table options. If the third I somehow did - using the indices of the days. From the second prolandals longer. Until I guessed to pass the function to the component. Otherwise, he could not access the filtered values.

For the last, I left the simplest task, as it seemed to me, and sat down in a puddle.
I think that most likely the approach is probably fundamentally wrong.

How can vue/javascript transform data for such tasks?

I set the intervals in computed - range. Knowledge in js was not enough to create an array of objects with a key - time.
I was thinking of doing something like ['time': event, etc..

Each line can be assigned an event by index.
It seems to be nearby, but I feel that such tasks are solved differently.

The final task without using fullcalendar and other things is to make such a sheet dynamic. Events come in real time. And I want them to immediately appear in the right place ...

Who can share advice / experience?
Forgot to attach fiddle. In general, while I thought I did it like.