<div id="app" class="center">
  <div id="time" v-html="time"></div>
  <div class="buttons">
    <button v-if="!state" @click="resume">Resume</button>
    <button v-if="state" @click="pause">Pause</button>
  </div>
</div>
body {
  background: blueviolet;
}
#time {
  color: #fff;
  font-size: 140px;
  // width: 100%;
  // display: block;
  text-align: center;
}
#app {
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.buttons {
  // display: block;
  // width: 100%;
  text-align: center;
  position: absolute;
  bottom: 30%;
  button {
    background-color: darkblue;
    border: none;
    padding: 14px 34px 10px 34px;
    text-transform: uppercase;
    color: #fff;
    font-weight: bold;
    letter-spacing: 4px;
  }
}
View Compiled
// Based on https://gist.github.com/motatoes/45e815ff0c83d95710557fdf85af0b8c

new Vue({
  el: "#app",
  data: {
    state: true,
    currentTime: Date.now(),
    interval: null
  },
  mounted: function(){
    this.interval = setInterval(this.updateCurrentTime, 1000);
  },
  computed: {
    time: function() {
      return this.hours + ":" + this.minutes + ":" + this.seconds;
    },
    milliseconds: function() {
      return this.currentTime;
    },
    hours: function() {
      var milli = this.milliseconds;
      // Doing the math
      // var hrs = Math.floor((milli / 3600000) % 24);
      // Using getHours()
      var hrs = new Date().getHours();
      if (hrs >= 13) { hrs = hrs - 12 }
      return hrs >= 10 ? hrs : '0' + hrs;
    },
    minutes: function() {
      var milli = this.milliseconds;
      var min = Math.floor((milli / 60000) % 60);
      return min >= 10 ? min : '0' + min;
    },
    seconds: function() {
      var milli = this.milliseconds;
      var sec = Math.ceil((milli % 60000) / 1000).toFixed(0);
      if (sec == 60) { sec = 00 }
      return sec >= 10 ? sec : '0' + sec;
    }
  },
  methods: {
    reset: function() {
      this.state = true;
      this.currentTime = Date.now();
    },
    pause: function() {
      this.state = false;
    },
    resume: function() {
      this.state = true;
    },
    updateCurrentTime: function() {
      if (this.state == true) {
          this.currentTime = Date.now();
      }
    }
  }
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js