SOURCE

const { log, dir, table, clear, warn, error } = console; clear();
clear()

const { createApp } = PetiteVue
const { vRef, vResize, vIntersect } = PetiteVueDirectives

createApp({
    domSize: [0, 0],
    elemSize: [0, 0],
    inView: true,
    mounted() {
        console.log(this.$refs.box)
    }
})
.directive('ref', vRef)
.directive('resize', vResize)
.directive('intersect', vIntersect)
.mount('#app')

<div id="app" v-resize:document="domSize=[$v.width, $v.height]" @vue:mounted="mounted">
    <div v-ref="box" class="box" v-resize="elemSize=[Math.round($v.width), Math.round($v.height)]">
        element size: {{elemSize}}
    </div>
    <p>document size: {{domSize}}</p>
    <div class="ball" v-intersect="inView=$v.intersect">ball</div>
    <div style="position:fixed;bottom:0;background:white;padding:5px 10px;">ball in viewport: {{inView}}</div>
    <div class="ruler"></div>
</div>

html, body {
    margin: 0;
    height: 100%;
    font-family: monospace;
    font-size: 16px;
}

.box {
    padding: 10px;
    border: 1px solid orange;
    animation: resize 1s ease-in-out alternate infinite;
}

@keyframes resize {
    0%   { width:200px; height:50px; }
    100% { width:400px; height:80px; }
}

.ruler {
    width: 10dvw;
    height: 102dvh;
    background: url(https://ax.minicg.com/images/ruler.svg);
    background-repeat: repeat-y;
    margin: 20px 0;
}

.ball {
    width: fit-content;
    aspect-ratio: 1 / 1;;
    border-radius: 100px;
    padding: 30px;
    background: #fc0;
}