vue2 -> vue3 comparison - VUEJS

vue2.vue

<template>
  <div>
    <h1 class="timer">{{toMin}}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      difftime: null
    };
  },
  methods: {
    updatetick() {
      var nowtime = new Date().getTime();
      var endDay = new Date().setHours(23, 59, 59);
      this.difftime = endDay - nowtime;
    }
  },
  mounted() {
    document.title = this.toMin;
    this.updatetick();
    var vm = this;

    setInterval(function() {
      vm.updatetick();
    }, 60000);
  },
  computed: {
    toMin() {
      var minutes = Math.floor(this.difftime / 60000);
      return minutes;
    }
  },
  watch: {
    difftime() {
      document.title = this.toMin;
    }
  }
};
</script>

<style>

</style>

vue3.vue

<template>
  <div>
    <h1 class="timer">{{state.minutes}}</h1>
  </div>
</template>

<script>
import { reactive, onMounted, computed, watchEffect } from "vue";
export default {
  setup() {
    function updateTick() {
      var nowtime = new Date().getTime();
      var endDay = new Date().setHours(23, 59, 59);
      state.difftime = endDay - nowtime;
    }

    let state = reactive({
      difftime: null,
      minutes: computed(() => Math.floor(state.difftime / 60000))
    });
    
    watchEffect(() => {
      document.title = "1440 | " + state.minutes;
    });

    onMounted(() => {
      updateTick();
      setInterval(function() {
        updateTick();
      }, 60000);
    });

    return {
      state,
      updateTick
    };
  }
};
</script>