Vue Js Automatically Refresh or Reload a Page

<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <h3>Vue Js Auto Reload Page and Show Toast Message</h3>
    <div id="app">
        <h1>Hello, world!</h1>
        <div v-if="toastMessage" class="toast">
            <div>{{ toastMessage }}</div>
            <button @click="hideToast">X</button>
        </div>
    </div>
    <script type="module">
        const app = new Vue({
            el: "#app",
            data() {
                return {
                    toastMessage: '',
                };
            },
            mounted() {
                setInterval(() => {
                    window.parent.location.reload();
                }, 10000); // reload every 10 seconds
                this.showToast('Page updated Successfully at ' + new Date().toLocaleTimeString() + '!');
            },
            methods: {
                showToast(message) {
                    this.toastMessage = message;
                    setTimeout(() => {
                        this.toastMessage = '';
                    }, 5000); // hide the toast after 5 seconds
                },
                hideToast() {
                    this.toastMessage = '';
                },
            },
        })
    </script>
    <style scoped>
        .toast {
            position: fixed;
            left: 50%;
            bottom: 20px;
            transform: translateX(-50%);
            background-color: #333;
            color: #fff;
            padding: 1rem;
            border-radius: 0.5rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            max-width: 90%;
        }

.toast button {
            background-color: transparent;
            color: #fff;
            border: none;
            font-size: 1rem;
            margin-left: 1rem;
            cursor: pointer;
        }
    </style>
</body>
</html>

​x
 
<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <h3>Vue Js Auto Reload Page and Show Toast Message</h3>
    <div id="app">
        <h1>Hello, world!</h1>
        <div v-if="toastMessage" class="toast">
            <div>{{ toastMessage }}</div>
            <button @click="hideToast">X</button>
        </div>
    </div>
    <script type="module">
        const app = new Vue({
            el: "#app",
            data() {
                return {
                    toastMessage: '',
                };
            },
            mounted() {
                setInterval(() => {
                    window.parent.location.reload();
                }, 10000); // reload every 10 seconds
                this.showToast('Page updated Successfully at ' + new Date().toLocaleTimeString() + '!');
            },
            methods: {
                showToast(message) {
                    this.toastMessage = message;
                    setTimeout(() => {
                        this.toastMessage = '';
                    }, 5000); // hide the toast after 5 seconds
                },
                hideToast() {
                    this.toastMessage = '';
                },
            },
        })
    </script>
    <style scoped>
        .toast {
            position: fixed;
            left: 50%;
            bottom: 20px;
            transform: translateX(-50%);
            background-color: #333;
            color: #fff;
            padding: 1rem;
            border-radius: 0.5rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            max-width: 90%;
        }
​
        .toast button {
            background-color: transparent;
            color: #fff;
            border: none;
            font-size: 1rem;
            margin-left: 1rem;
            cursor: pointer;
        }
    </style>
</body>
</html>