setup 안에 변수를 CSS 에 사용하기 : --변수명과 var(--변수명)

<template>
        
    <div 
    
        :style  ="style"
        
    ></div>

</template>

<script>

    export default {
        
        setup() {

            const style = { 
                
                '--background-color'        : 'darkblue',
                '--background-hover-color'  : 'yellow',
            
            }

            return { style }

        }
        
    }

</script>

<style scoped>

    div {

        background-color    :   var(--background-color);

    }

    div:hover {

        background-color    :   var(--background-hover-color);

    }

</style>