Vue Js Track Time Spent on page

<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>Vue Js Measure Time Spent on Page</h1>
        <p>Time Spent on Page: {{ formattedTime }}</p>
    </div>
    <script type="module">
        const app = new Vue({
            el: "#app",
            data() {
                return {
                    time: 0,
                    intervalId: null,
                    pageLoadTime: Date.now(),
                    isActive: true,
                };
            },
            created() {
                this.intervalId = setInterval(() => {
                    if (this.isActive) {
                        this.time = Date.now() - this.pageLoadTime;
                    }
                }, 1000);
            },
            destroyed() {
                clearInterval(this.intervalId);
            },
            computed: {
                formattedTime() {
                    const minutes = Math.floor(this.time / 60000);
                    const seconds = ((this.time % 60000) / 1000).toFixed(0);
                    return `${minutes}:${(seconds < 10 ? "0" : "")}${seconds}`;
                },
            },
            mounted() {
                document.addEventListener("visibilitychange", () => {
                    this.isActive = !document.hidden;
                    if (this.isActive) {
                        this.pageLoadTime = Date.now() - this.time;
                    }
                });
            },

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