Vue Js Dynamically check if element hit top of window

<!DOCTYPE html>
<html>
<head>
    <script src="https://unpkg.com/vue@3.2.22/dist/vue.global.js"></script>
</head>
<body>
    <div id="app">
        <div ref="test">Vue Js Dynamically check if elements hit top of window</div>
        <small class="result" v-if="result">{{result}}</small>
    </div>
    <script type="module">
        const app = Vue.createApp({
            data() {
                return {
                    result: ''
                };
            },
            mounted() {
                const itemOffset = this.$refs.test.offsetTop;

})

app.mount('#app')
    </script>
    <style scoped>
        #app {
            height: 600px;
        }

#app div {
            font-family: Arial, sans-serif;
            font-size: 20px;
            font-weight: bold;
            text-align: center;
            padding: 20px;
            color: white;
            background-color: #4CAF50;
            /* Green */
        }

.result {
            font-size: 16px;
            color: #4CAF50;
            /* Green */
            position: fixed;
            left: 50%;
            transform: translateX(-50%);
            bottom: 20px;
            background-color: #333;
            color: #fff;
            padding: 12px;
            border-radius: 6px;
            z-index: 9999;

transition: opacity 0.3s ease-in-out;
        }
    </style>

</body>

</html>