Swiping Element Overflow ( Collision Not Working Properly)

I'm working on creating a swiping effect ( Drag to show modal). When ever I swipe the element the element overflow the screen , I use getBoundingClientRect() to check for collision but it's not working correctly for some reasons.

This is the code Below

Note: ClassNames are Tailwinds

<template>
    <div id="page" class="fixed top-0 left-0 bottom-0 right-0">
        <div class="relative h-full overflow-y-hidden">
            <div 
                ref="dragable"
                class="absolute left-0 right-0 h-full -bottom-[45%] bg-purple-200 p-2 border-1 rounded-t-xl"
                @touchstart="onTouchStart"
                @touchmove="onTouchMove"
                @touchend="onTouchEnd">
                
              {{ touchTimer }}
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                initialY: 0,
                currentY: 0,
                pageY: 0,
                collide: false,
                touchTimer: 0,
                touchInterval: null
            };
        },
        computed: {
            dragable(){
                return this.$refs.dragable;
            }
        },
        methods: {
            onTouchStart(event){
                this.initialY = event.touches[0].clientY;
                event.currentTarget.style.transition = "unset";
            },
            onTouchMove(event){
                this.currentY = event.touches[0].clientY - this.initialY;
                const view = event.currentTarget;
                const { top } = view.getBoundingClientRect();
                
                if(this.currentY && !this.collide)
                   view.style.transform = `translate(0, ${this.currentY}px)`;
                this.collide = top < 0;
            },
            
            onTouchEnd(event){
                const view = event.currentTarget;
                if(!this.collide)
                    view.style.transform = "translate(0,0)";
            }
        },
        mounted(){
            document.body.ondblclick = function (){
                document.body.requestFullscreen();
            }
        }
    };
</script>
<style>
   body{  -webkit-overscroll-behavior: contain; }
</style>