将计算值绑定到自定义指令

Question

初始化自定义可拖动指令的位置时遇到麻烦。我应该将其放在屏幕中央。但是，在计算之后，它仅绑定到data（）上的（0,0）上。这是我的代码如下：

export default {
  directives: {
    Drag,
  },
  data: function() {
    return {
      position: {
        x: 0,
        y: 0,
      },
      window: {
        width: 0,
        height: 0,
      },
    }
  },
  created() {
    window.addEventListener('resize', this.handleResize)
    this.handleResize()
  },
  destroyed() {
    window.removeEventListener('resize', this.handleResize)
  },
  methods: {
    handleResize() {
      this.window.width = window.innerWidth
      this.window.height = window.innerHeight
    },
  },
  mounted: function() {
    this.position.x = this.window.width / 2
    this.position.y = this.window.height / 2

  },
}

在HTML上：

 <div class="modal-wrapper" v-drag="position">