요소의 위치 modulatin 하기 : setInterval

<template>
    
    <div id="box">

        <div id="ball" :style="style"></div>

    </div>

</template>

<script>

    import { reactive } from 'vue'
    import { random } from 'lodash'

    export default {

        setup() {

            const style = reactive({})

            setInterval(() => { 
                
                const randomSize        = random(100)
                
                style.width             = randomSize + 'px'
                style.height            = style.width   
                style.backgroundColor   = `hsl(${random(360)}, 50%, 50%)`
                style.borderRadius      = random(50) + '%'
                style.transform         = `translate(${random(200 - randomSize)}px, ${random(200 - randomSize)}px)`

            }, 300)

            return { style }
                  
        }

    }

</script>

<style scoped>

    #box {

        width : 200px;
        height : 200px;

        border: 1px solid red;

    }

    #ball {

        position            : absolute;
        width               : 20px;
        height              : 20px;
        background-color    : yellow;
        border-radius       : 50%;
        transition          : all 0.3s;

    }
    
</style>