Monitoring size of a positioned ancestor ([1], [2]).

--size1.w={{ size1.w }}--
--size1.h={{ size1.h }}--
<div v-bind:style="{width: px(p.x), height: px(p.y)}" class="canvas h200">
    <vue-sizemon v-model="size1" />
    --size1.w={{ size1.w }}--
    <br>
    --size1.h={{ size1.h }}--
    <div v-on:mousedown="mousedown($event, p)" v-bind:style="{top: px(p.y), left: px(p.x)}" class="box" />
</div>
--size2.w={{ size2.w }}--
--size2.h={{ size2.h }}--

--size3.w={{ size3.w }}--
--size3.h={{ size3.h }}--