JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.2/tailwind.min.css">
<div id="app">
 <div>
      <h1 class="w-full font-bold bg-blue-100 text-center">Salary real-time Calc</h1>
      <label class="font-bold" >Ставка в час, руб.</label>
      <input class="w-12" type="number" v-model="ratePerHour">
      <div>
          <h1 class="font-bold">
            Дата и время real-time:  </h1> {{date | dateFilter}}
        
      </div>
      <button @click="startCounting" class="bg-green-200">Открыть смену</button>
      <button @click="stopCounting" class="bg-red-200">Закрыть смену</button>
      <div v-if="!showTotal"> Ваш заработок real-time: {{salary | salaryRub}} руб.</div>
      <div v-if="showTotal">
          <div>
              <h1>Начало смены: <span>{{shift.start | dateFilter}}</span></h1>
          </div>
           <div>
              <h1>Конец смены: <span>{{shift.end | dateFilter}}</span></h1>
          </div>
          <h1>Смена: {{shift.total}} секунд,  {{shift.total | shiftHours}} часов</h1>
          <h1>Заработано: {{salary | salaryRub}} руб.</h1>
      </div>
  </div>
</div>

JavaScript

new Vue({
  el: "#app",
  data: {
    date: '',
            timeInterval: null,
            countInterval: null,
            ratePerHour: 200,
            salary: 0,
            startCount: false,
            showTotal:false,
            shift: {
                start:null,
                end:null,
                total: 0

            }
  },
 mounted() {
        this.timeInterval = setInterval(()=>{
            this.date = new Date()
        }, 1000)

    },
    filters: {
        dateFilter: function(value) {
             if (!value) return ''
            let options = {
                 day: '2-digit',
                 month: 'long',
                 year: 'numeric',
                 hour: '2-digit',
                 minute: '2-digit',
                 second: '2-digit',
             }


             return new Intl.DateTimeFormat('ru-Ru',options).format( new Date(value))
        },
        shiftHours: function (value) {
            if (!value) return ''
            value = Math.floor(value / 60 / 60);
            return value
        },
        salaryRub: function (value) {
            if (!value) return ''
            value = value.toFixed(2);
            return value
        }
    },
    methods: {
        startCounting() {
            this.showTotal=false
            this.startCount=true
            this.shift.start = new Date()
            this.countInterval = setInterval(()=>{
                this.salary = this.salary+ (this.ratePerHour/60/60)
                this.shift.total++
        }, 1000)
        },
        stopCounting() {
            clearInterval(this.countInterval)
                this.showTotal=true
                this.startCount=false
                this.shift.end = new Date()
        }
    },
        beforeDestroy() {
            clearInterval(this.timeInterval)
            clearInterval(this.countInterval)
        }
})