vue count down component with finish emit

CountDown.vue

<template>
  <div>
    <p 
      v-if="!finish" 
      class="count-down">
      <span><div><p>{{ days }}</p></div><p>روز</p></span>
      <span><div><p>{{ hours }}</p></div><p>ساعت</p></span>
      <span><div><p>{{ minutes }}</p></div><p>دقیقه</p></span>
      <span><div><p>{{ seconds }}</p></div><p>ثانیه</p></span>
    </p>
  </div>
</template>

<script>
export default {
  name: 'CountDwon',
  props: {
    deadLine: {
      required: true,
      type: String
    }
  },
  data() {
    return {
      days: '',
      hours: '',
      minutes: '',
      seconds: '',
      finish: false
    }
  },
  mounted() {
    setTimeout(() => {
      let deadLine = this.deadLine
      let timeDiffrent = new Date(deadLine).getTime() - new Date().getTime()
      let intervalTimer

      if (timeDiffrent >= 0) {
        intervalTimer = setInterval(() => {
          timeDiffrent = new Date(deadLine).getTime() - new Date().getTime()

          if (timeDiffrent <= 0) {
            clearInterval(intervalTimer)
            this.finish = true
            this.$emit('finishedTime', this.finish)
          }
          this.days = Math.floor(timeDiffrent / (1000 * 60 * 60 * 24))
          this.hours = Math.floor(
            (timeDiffrent % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
          )
          this.minutes = Math.floor(
            (timeDiffrent % (1000 * 60 * 60)) / (1000 * 60)
          )
          this.seconds = Math.floor((timeDiffrent % (1000 * 60)) / 1000)
        }, 1000)
      } else {
        this.finish = true
        this.$emit('finishedTime', this.finish)
      }
    }, 500)
  }
}
</script>

<style scoped>
.count-down span {
  display: inline-block;
}
.count-down span p {
  margin-bottom: 0;
}
.count-down span div:first-child {
  width: 70px;
  height: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 4px solid rgb(243, 241, 0);
  border-radius: 50%;
  font-size: 25px;
  padding-top: 6px;
  box-shadow: 0 0 5px 5px #000;
  margin: 10px;
}
.count-down span p {
  color: rgb(0, 0, 0);
  text-shadow: 0px 0px 1px #000;
}

@media (max-width: 461px) {
  .count-down span div:first-child {
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid rgb(243, 241, 0);
    border-radius: 50%;
    font-size: 13px;
    padding-top: 4px;
    box-shadow: 0 0 5px 2px #000;
    margin: 5px;
  }
  .count-down span p[data-v-9b31e1f4] {
    color: rgb(0, 0, 0);
    text-shadow: 0px 0px 1px #000;
    font-size: 12px;
  }
}
</style>