<template>
    <div class="box" :style="styleVar"></div>
</template>

<script>
export default {
    name: "style",
    props: {
        height: {
            type: Number,
            default: 10
        },
        width: {
            type: Number,
            default: 10
        }
    },
    computed: {
        styleVar() {
            return {
                '--box-height': this.height + 'px',
                '--box-width': this.width + 'px'
            }
        }
    }
}
</script>

<style scoped lang="scss">
.box {
    height: var(--box-height);
    width: var(--box-width);
    background: red;
}
</style>