DropDown 러프한 스케치 코드..

<template>
    
    <div class="full tw-gray-1">

        <div ref="label" class="full absolute tw-pink-2 center" @mousedown="clickLabel"><span>Menu</span></div>
        <div v-if="state.isOpen" class="full-width absolute tw-blue-2 overflow-auto" :style="state.dropDownStyle">

            <div v-for="each in state.items" :key="each" class="full-width center tw-blue-1 border-1" :style="state.itemStyle"><span>{{each}}</span></div>
           
        </div>

    </div>

</template>

<script>

    import { reactive, ref, onMounted } from 'vue'

    export default {

        setup() {

            const state = reactive({
                
                items           : createItems(8), 
                isOpen          : false,
                itemStyle       : {},
                dropDownStyle   : {},

            })

            function createItems(amount) {

                let items = []

                for (let i = 0; i < amount; ++i) {

                    items.push(i)

                }

                return items

            }

            
            const label = ref(null)
            
            const clickLabel = () => {

                state.isOpen = !state.isOpen

                if (state.isOpen) {

                    const gapStart          = 5
                    const gapEnd            = 20 
                    const labelBound        = label.value.getBoundingClientRect()
                    const dropDownTop       = labelBound.height + gapStart
                    const itemsHeight       = labelBound.height * state.items.length
                    const spaceHeight       = window.innerHeight - (labelBound.top + labelBound.height + gapEnd)
                    const dropDownHeight    = itemsHeight < spaceHeight ? itemsHeight : spaceHeight

                    state.itemStyle = {

                        height      : labelBound.height + 'px'

                    }

                    state.dropDownStyle = { 
                        
                        top         : dropDownTop + 'px',
                        height      : dropDownHeight + 'px',
                    
                    }

                }
                
            }

            return { state, label, clickLabel }

        }

    }

</script>