Position problem while using prop 'parent' and 'scale'

[StreakingMan]

I have update the component to version 2.2.0. I try to update 'x' and 'y' while using 'parent' and 'scale' but it behaves strange.

The following is my test demo in story book

here's code

import Vue from 'vue'

export default () => ({
  template: `
    <div>
      <div v-bind:style="{ transform: 'scale(' + scale + ')' }"
               style="width: 800px;height: 800px;border:1px solid red; font-size: 25px">
        parent size is 800x800, scale: {{scale}}
        <vue-draggable-resizable :x="x" :y="100" :scale="scale" :w="100" :h="100" :parent="true">
          x: {{x}}
        </vue-draggable-resizable>

        <vue-draggable-resizable v-for="n in 5" :key="n" :x="n*100" :y="200" :w="100" :h="100" :scale="scale" :parent="true">
          x: {{n*100}}
        </vue-draggable-resizable>
      </div>
      <button @click="handleClick">x+100</button>
      <div id="toolbar">
          <input type="range" min="0.1" max="2" step="0.1" v-model.number="scale">
          <label>Scale</label>
        </div>
    </div>
  `,
  data() {
    return {
      scale: 0.8,
      x: 100,
    }
  },
  methods: {
    handleClick(){
      this.x+=100;
    }
  }
})

And this problem dosen't exist in version 2.1.2, I haven't seen the diffrences between this two version but it seems like the props 'x''y' watcher's bug.

thanks for read this issue ：)

[gorkys]

咦，我测试好像没有问题，我照搬了作者的更新。

[surajpenugonda]

I am also facing this issue.

my code

<template>
  <div id="app">
    <div style="height: 500px; width: 500px; border: 1px solid red; position: relative; transform: scale(0.5)">
      <vue-draggable-resizable :x="xPos" :y="yPos" :w="400" :h="400" :debug="false" :min-width="200" :scale="0.5" :min-height="200" @dragstop="onDragStop">
        <p>vue-draggable-resizable</p>
      </vue-draggable-resizable>
    </div>
  </div>
</template>

<script>
import VueDraggableResizable from './components/vue-draggable-resizable'
import './components/vue-draggable-resizable.css'

export default {
  name: 'app',
  components: {
    VueDraggableResizable
  },
  data () {
    return {
      xPos: 10,
      yPos: 10
    }
  },
  methods: {
    onDragStop (left, top) {
      console.log(left, top)
      this.xPos = left
      this.yPos = top
    }
  }
}
</script>

<style>
  .vdr {
    border: 1px dashed black;
  }
</style>

I got this issue when I am using v2.2.0

[StreakingMan]

咦，我测试好像没有问题，我照搬了作者的更新。

我这边是直接跑的源码的demo