[wegas]

https://jsfiddle.net/j2FunOnly/51Lhk4sv/


компонент app.js

Vue.component('lessontimer-component', require('./components/site/InfoComponent.vue').default);

путь к компоненту - /components/site/InfoComponent.vue

<template>
    <div class="container">
        <div class="row">
            <div id="show">
                <span v-if="current">
                  {{current.lesson}} {{current.t}}  {{current.h2}}:{{current.m2}} осталось {{current.time | formatTime}}
                </span>
                <span v-else>
                  сейчас нет событий
                </span>
            </div>
            <div id='Lessontimer_time2'>
                <div v-for="item in schedule"
                     v-if="item.lesson !== 'Перемена'"
                     :id="`k${item.lesid}`"
                     :key="item.lesid"
                     :style="item.lesid === current.lesid ? 'backgroundColor: #960505' : ''"
                >
                    {{item.lesson}} c {{item.h}}:{{item.m}} по {{item.h2}}:{{item.m2}}
                    <br>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    const schedule = [
        { t: "Занятия завершены",     h: '00',  m: '00',  h2: '07', m2: '00',  lesson: 'Конец дня', lesid: 1 },
        { t: "До начала 1 урока",     h: '07',  m: '00',  h2: '08', m2: '00',  lesson: 'Перемена',  lesid: 2 },
        { t: "До окончания 1 урока",  h: '08',  m: '00',  h2: '08', m2: '45',  lesson: '1 Урок',    lesid: 3 },
        { t: "До начала 2 урока",     h: '08',  m: '45', h2: '08', m2: '55',  lesson: 'Перемена',  lesid: 4 },
        { t: "До окончания 2 урока",  h: '08',  m: '55', h2: '09', m2: '40',  lesson: '2 Урок',    lesid: 5 },
        { t: "До начала 3 урока",     h: '09',  m: '40', h2: '10', m2: '05', lesson: 'Перемена',  lesid: 6 },
        { t: "До окончания 3 урока",  h: '10', m: '05',  h2: '10', m2: '50', lesson: '3 Урок',    lesid: 7 },
        { t: "До начала 4 урока",     h: '10', m: '45', h2: '11', m2: '15', lesson: 'Перемена',  lesid: 8 },
        { t: "До окончания 4 урока",  h: '11', m: '15', h2: '12', m2: '00', lesson: '4 Урок',    lesid: 9 },
        { t: "До начала 5 урока",     h: '12', m: '00',  h2: '12', m2: '25', lesson: 'Перемена',  lesid: 10 },
        { t: "До окончания 5 урока",  h: '12', m: '25', h2: '13', m2: '10', lesson: '5 Урок',    lesid: 11 },
        { t: "До начала 6 урока",     h: '13', m: '10', h2: '13', m2: '20', lesson: 'Перемена',  lesid: 12 },
        { t: "До окончания 6 урока",  h: '13', m: '20', h2: '14', m2: '05', lesson: '6 Урок',    lesid: 13 },
        { t: "До начала 7 урока",     h: '14', m: '05',  h2: '14', m2: '20', lesson: 'Перемена',  lesid: 14 },
        { t: "До окончания 7 урока",  h: '14', m: '20', h2: '15', m2: '05', lesson: '7 Урок',    lesid: 15 },
        { t: "До начала 8 урока",     h: '15', m: '05',  h2: '15', m2: '15', lesson: 'Перемена',  lesid: 16 },
        { t: "До окончания 8 урока",  h: '15', m: '15', h2: '16', m2: '00', lesson: '8 Урок',    lesid: 17 },
        { t: "До начала 9 урока",     h: '16', m: '00',  h2: '16', m2: '10', lesson: 'Перемена',  lesid: 18 },
        { t: "До окончания 9 урока",  h: '16', m: '10', h2: '16', m2: '55', lesson: '9 Урок',    lesid: 19 },
        { t: "До начала 10 урока",    h: '16', m: '55', h2: '17', m2: '05', lesson: 'Перемена',  lesid: 20 },
        { t: "До окончания 10 урока", h: '17', m: '05',  h2: '17', m2: '55', lesson: '10 Урок',   lesid: 21 },
        { t: "Занятия завершены",     h: '17', m: '55', h2: '23', m2: '59', lesson: 'Перемена',  lesid: 22 },
    ];

    Date.prototype.setTimezoneOffset = function(minutes) {
        var _minutes;

        if (this.timezoneOffset == _minutes) {
            _minutes = this.getTimezoneOffset();
        } else {
            _minutes = this.timezoneOffset;
        }

        if (arguments.length) {
            this.timezoneOffset = minutes;
        } else {
            this.timezoneOffset = minutes = this.getTimezoneOffset();
        }

        return this.setTime(this.getTime() + (_minutes - minutes) * 6e4);
    };

    const two = a => (9 < a ? "" : "0") + a;

    Vue.filter('two', two);

    Vue.filter('formatTime', a => {
        a = Math.floor(a / 1E3);
        var c = Math.floor(a / 60);
        var d = Math.floor(c / 60);

        a %= 60;
        c %= 60;

        return two(d) + ":" + two(c) + ":" + two(a)
    });

    import moment from 'moment';

    export default {
        data:function() {
            return {
                schedule,
                current: null,
            }
        },
        methods: {
            tick() {
                const a = new Date();
                a.setTimezoneOffset();
                const ms = a.getTime();

                this.current = Object.assign({}, this.current, this.schedule.find(v => {
                    a.setHours(v.h, v.m, 0, 0)

                    const from = a.getTime();

                    a.setHours(v.h2, v.m2, 0, 0);
                    const to = a.getTime();

                    v.time = to - ms;


                    return from < ms && ms < to
                }));

                var c = this.schedule.filter(function(v) {
                    a.setHours(v.h, v.m, 0, 0)
                    var from = a.getTime();
                    a.setHours(v.h2, v.m2, 0, 0);
                    var to = a.getTime();
                    v.time = to - ms;
                    return from < ms && ms < to
                });
                var html = c.reduce(function(html, v) {

                    return html += v.lesson + ' ' + v.t + "  " + v.h2 + ":" + v.m2;

                }, "");


                console.log(html)
            }
        },
        beforeMount () {
            this.tick();
        },
        mounted () {
            window.setInterval(() => this.tick(), 1000);
        }
    }
</script>

подключение компонента

<lessontimer-component></lessontimer-component>