the vue-draggable-resizable plug-in is used in the project. The project address https://github.com/mauricius/.
data structure is as follows:
{
pageData: [{

    id: "001",
    lay_num: "3",
    layData: [{
            lay_id: "lay001",
            lay_type: "image",
            lay_name: "",
            lay_img: img_lay1,
            lay_x: 0,
            lay_y: 0,
            lay_zindex: 0,
            lay_width: 233,
            lay_height: 116,
            lay_ani_name: "",
            lay_ani_title: "",
            lay_ani_time: 1,
            lay_ani_delay: 0,
            lay_ani_rotate: 0,
            active: true
        },
        {
            lay_id: "lay002",
            lay_type: "image",
            lay_name: "",
            lay_img: img_lay1,
            lay_x: 0,
            lay_y: 150,
            lay_zindex: 2,
            lay_width: 233,
            lay_height: 116,
            lay_ani_name: "",
            lay_ani_title: "",
            lay_ani_time: 1,
            lay_ani_delay: 0,
            lay_ani_rotate: 0,
            active: false
        },
        {
            lay_id: "lay003",
            lay_type: "image",
            lay_name: "",
            lay_img: img_lay1,
            lay_x: 0,
            lay_y: 300,
            lay_zindex: 3,
            lay_width: 233,
            lay_height: 116,
            lay_ani_name: "",
            lay_ani_title: "",
            lay_ani_time: 1,
            lay_ani_delay: 0,
            lay_ani_rotate: 0,
            active: false
        }]
},
{
    id: "002",
    lay_num: "1",
    layData: [
        {
            lay_id: "lay002001",
            lay_type: "image",
            lay_name: "",
            lay_img: img_lay1,
            lay_x: 0,
            lay_y: 0,
            lay_zindex: 0,
            lay_width: 233,
            lay_height: 116,
            lay_ani_name: "",
            lay_ani_title: "",
            lay_ani_time: 1,
            lay_ani_delay: 0,
            lay_ani_rotate: 0,
            active: false
        }]
}]

}

View Code:
< template VMI for = "(pageItem,pageIndex) in pageData" VMI if = "pageIndex==pageActive" >

                        <template v-for="(layItem,layIndex) in pageItem.layData">
                            <vue-draggable-resizable 
                                :w="layItem.lay_width" 
                                :h="layItem.lay_height" 
                                :x="layItem.lay_x" 
                                :y="layItem.lay_y" 
                                :z="layItem.lay_zindex" 
                                @dragging="onDrag" 
                                @resizing="onResize" 
                                @activated="onActivated(layIndex)" 
                                @deactivated="onDeactivated" 
                                :parent="false" 
                                :active="layItem.active" 
                                :class=""code-image-lay "+layItem.lay_ani_name">
                                    <div class="code-lay-cont" 
                                        :style=""-webkit-transform:rotate("+layItem.lay_ani_rotate+"deg);transform:rotate("+layItem.lay_ani_rotate+"deg);"">
                                        <img :src="layItem.lay_img"/>
                                    </div>
                            </vue-draggable-resizable>
                        </template>
                    </template>

Control method:
onResize (x, y, width, height) {

        this.dragResizeWidth = width;
        this.dragResizeHeight = height;
        this.dragResizeX = x;
        this.dragResizeY = y;
        for(let index in this.pageData) {
            if(this.pageActive == index) {
                for(let i in this.pageData[index].layData) {
                    if(this.pageData[index].layData[i].active == true) {
                        this.$set(this.pageData[index].layData[i], "lay_width", width);
                        this.$set(this.pageData[index].layData[i], "lay_height", height);
                    }
                }
            }
        }
    },
    onDrag(x, y) {
        this.dragResizeX = x;
        this.dragResizeY = y;
        for(let index in this.pageData) {
            if(this.pageActive == index) {
                for(let i in this.pageData[index].layData) {
                    if(this.pageData[index].layData[i].active == true) {
                        this.$set(this.pageData[index].layData[i], "lay_x", x);
                        this.$set(this.pageData[index].layData[i], "lay_y", y);
                    }
                }
            }
        }
    },
    onActivated(layIndex) {
        this.setAccActive = layIndex;
        for(let index in this.pageData) {
            if(this.pageActive == index) {
                for(let i in this.pageData[index].layData) {
                    if(i == layIndex) {
                        this.$set(this.pageData[index].layData[i], "active", true);
                    } else {
                        this.$set(this.pageData[index].layData[i], "active", false);
                    }
                }
            }
        }
    }                    

now I find a problem, that is, when I click on one of the elements, activate the dragged element, and then perform the resize operation. At this time, through the vue browser plug-in, the element size data has been updated and the view has been updated, but when I click on another element, the original element width and height data of the first click has been reset to the initial value, what the hell? Is this a plug-in problem, or is it my vue data loop problem? Is there any divine guidance? thank you.