<script>
import Moveable from "vue-moveable";

export default {
    components: { Moveable },
    data() {
        const moveableRef = null;
        return { moveableRef };
    },
    methods: {
        onClick() {
            this.$refs.moveableRef.updateRect();
        },
        onRenderGroup(e) {
            e.events.forEach(ev => {
                ev.target.style.transform = ev.transform;
            });
        }
    },
    mounted() {
        this.moveableRef = this.$refs.moveableRef;
    }
};
</script>
<template>
    <div class="container">
        <button @click="onClick">Resize</button>
        <div
            class="target target1"
            style="transform: rotate(30deg);"
        >Target1</div>
        <div class="target target2">Target2</div>
        <div
            class="target target3"
            style="transform: rotate(30deg);"
        >Target3</div>
        <Moveable
            ref="moveableRef"
            :target="[['.target1, .target2'], '.target3']"
            :draggable="true"
            :rotatable="true"
            :scalable="true"
            @renderGroup="onRenderGroup"/>
    </div>
</template>