app/src/components/Timer.vue

<template>
  <div class="timer">
    <p v-if="warning == false" class="timeleft reverse">{{ countDown.toString() }}</p>
    <p v-if="(warning == true) || (typeof warning == 'undefined')" class="timeout reverse">
      <img src="joker.png" alt="joker">
      <img src="joker.png" alt="joker">
      <img src="joker.png" alt="joker">
      <img src="joker.png" alt="joker">
      <img src="joker.png" alt="joker">
    </p>
    <button v-on:click="restartTimer" class="timerBtn"><span class="timerBtn-inner"></span></button>
    <p v-if="warning == false" class="timeleft">{{ countDown.toString() }}</p>
    <p v-if="warning == true || (typeof warning == 'undefined')" class="timeout">
      <img src="joker.png" alt="joker">
      <img src="joker.png" alt="joker">
      <img src="joker.png" alt="joker">
      <img src="joker.png" alt="joker">
      <img src="joker.png" alt="joker">
    </p>
  </div>
</template>

<script>
var Interval;
export default {
  name: "Timer",
  props: {
    time: Number,
  },
  data: function() {
    return {
      countDown: -2,
      warning: true,
    }
  },
  mounted: function() {
  },
  methods: {
    timeleft: function(){
      this.countDown--;
      if(this.countDown == 0) {
        this.warning = true
        clearInterval(Interval);
      }

    },
    restartTimer: function() {
      this.countDown = this.time;
      this.warning = false;
      clearInterval(Interval);
      Interval = setInterval(() => {
        this.timeleft()
      }, 1000);
    }
  },
}
</script>

<style lang="scss" scoped>
@import 'src/scss/fonts.scss';

.timer {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;

  .timeleft {
    font-size: 5rem;
    margin: 40px;
  }

  .timeout {
    margin: 40px;

    img {
      height: 3rem;
    }
  }

  .timerBtn {
    appearance: none;
    border: 1px solid #2c3e50;
    border-radius: 3px;
    font-size: 3rem;
    background: none;
    padding: 2rem;

    .timerBtn-inner {
      display: inline-block;
      height: 2rem;
      width: 2rem;
      background-color: #2c3e50;
    }
  }

  .reverse {
    transform: scale(-1, -1);
  }

}

</style>