VueJS не обновляет стили элемента

Пишу drag-and-drop с возможностью поворота и ресайза на VueJs. Суть работы простая: отслеживаю перемещения мышкой, в соответствии с ними обновляю модель, в которой хранится положение элемента и которая потом отправляется на сервер. Эта модель успешно обновляется при перемещениях мышки, но стили, которые я к ней прикрепил, не обновляются.

<div
    :style="{
        top: layout.top,
        left: layout.left,
        width: layout.width,
        rotate: layout.rotate,
        position: 'absolute'}"
 >

console.log при этом пишет, что модель обновляется. Что я делаю не так? В чём может быть причина? Заранее спасибо PS. Попробовал вывести в консоли модель при перемещении мышью - всё норм. Выводит это:

Но watch его не видит (точнее, не видит при перемещении, хотя видит при вставке фото в макет)(на проверку if(this.pageKey === 'photo_cover_main') не обращайте внимания):

layout: function (val) {
    if(this.pageKey === 'photo_cover_main')
        alert()
}

Соответственно, из-за этого не перемещается сама фотка. Почему даже watch не видит - не понимаю Модель передаётся в этот компонент свойством, а при перемещении фото вызывается $emit на родителя, который обновляет данные

Layout получается запросом к API

$.get('/api/users/order-layout', data => {
     this.layout = data;
});

В родительском компоненте следующий код шаблона:

<hole-view
    v-for="(hole, holeKey) in page.holes_coordinats"
    :hole="hole"
    :hole-key="holeKey"
    :layout="layout.content[pageKey] && layout.content[pageKey][holeKey] ? layout.content[pageKey][holeKey] : {}"
    :page-key="pageKey"
    @moved="movedHoleImageBind"

/>

В дочернем компоненте при перетаскивании объекта мышью после вычисления всех координат вызывается $emit:

this.$emit('moved', top, left, x, y);

В родительском компоненте на событие moved вешается такой обработчик:

movedHoleImageBind(top, left, x, y){
            try{
                this.$set(this.layout.content[this.editingHoleImage.pageKey][this.editingHoleImage.holeKey], 'top', top);
                this.$set(this.layout.content[this.editingHoleImage.pageKey][this.editingHoleImage.holeKey], 'left', left);
            }catch (e) {}
        }

HTML получается такой (сама фотка - div.image-in-layout-slider и img в нём):

<div data-v-1a44c9e7="" data-v-58dc894e="" data-index="0" data-page="photo_cover_main"
 class="slider__empty-block slider__empty-block-focus"
 style="top: 19.6875%; left: 64.3931%; width: 22.7381%; height: 50%; position: absolute;">
<div data-v-1a44c9e7="" class="image-in-layout-slider"
     style="top: -22.4529%; left: 0px; width: 100%; position: absolute;"><img data-v-1a44c9e7=""
                                                                              src="http://deti/wp-content/uploads/general_photos/83/FdjjGawbNjA.jpg"
                                                                              class="img-responsive ls-is-cached lazyloaded"><span
            data-v-1a44c9e7="" title="Повернуть" class="rotate-slider-image"><i data-v-1a44c9e7=""
                                                                                aria-hidden="true"
                                                                                class="glyphicon glyphicon-repeat"></i></span><span
            data-v-1a44c9e7="" title="Удалить" class="slider-photo-remove-js"><i data-v-1a44c9e7=""
                                                                                 aria-hidden="true"
                                                                                 class="glyphicon glyphicon-remove"></i></span>
    <div data-v-1a44c9e7="" class="my-resizable-block my-resizable-block-vertical"></div>
    <div data-v-1a44c9e7="" class="my-resizable-block my-resizable-block-horizontal"></div>
    <div data-v-1a44c9e7="" class="my-resizable-block my-resizable-block-diagonal"></div>
</div>