Untitled

<html>
  ...code

      <script>

          var app = new Vue({
            el: '#app',
            data() {
              return {
                running: false,
                timer: 0,
                formattedTime: "00:00:00",
                interval: null,
                sessions: [
                  { name: 'Initial State', time: '22:15:21' }
                ]
              }
            },

            methods: {
              toggleTimer: function() {
                if (this.running) {
                  // change state to not running
                  this.running = false;

                  // stop the interval
                  clearInterval(this.interval);

                  // save current session
                  this.saveSession();

                  // reset timer
                  this.timer = 0;
                  this.formattedTime = '00:00:00';

                  // finish function execution
                  return;
                }

                // if it is not running (running = false)
                // change state to running
                this.running = true;

                // the interval
                this.interval = setInterval(function() {
                  this.timer++; // increase the timer with 1 (1 second)
                  this.formattedTime = this.convertSecondsToTime(this.timer);
                }.bind(this), 1000) // 1000 ms = 1 second
              },

              convertSecondsToTime: function(seconds) {
                var date = new Date(null);

                date.setSeconds(seconds);
                return date.toISOString().substr(11, 8);
              },

              saveSession: function() {
                // todo
              }
            }


          });
    </script>
  </body>
</html>