divやpをドラッグで移動させたい

やりたいこと

マウスでdiv要素などをドラッグで動かす
要素のクリックしたところを持てるようにする

現状

クリックしたら動くようになっている
右と下に行くときの挙動がおかしい
マウスに要素の左上が来るようになっている

コード

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <title>Vue.js App</title>
6    <link rel="stylesheet" href="./div_main.css">
7</head>
8<body>
9    <div id="app">
10        <div id="back" @mousemove="getXY">
11            <comp v-for="item in list" :key="item.id" v-bind="item" @getid="getID"></comp>
12        </div>
13        {{ID}} {{move}}
14    </div>
15    
16    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
17    <script src="./div_main.js"></script>
18</body>
19</html>

javascript
1Vue.component('comp', {
2    template: `<p :style="{left: left, top: top, 'font-size': fsize}" @click="clicked">{{ text }}</p>`,
3    props: {id: Number, left: String, top: String, fsize: String, text: String},
4    methods: {
5        clicked() {
6            this.$emit('getid', this.id)
7        }
8    }
9})
10
11new Vue({
12    el: '#app',
13    data: {
14        list: [
15            {id: 0, left: '100px', top: '100px', 'fsize': '50px', text: 'ここに書いてね'},
16            {id: 1, left: '150px', top: '150px', 'fsize': '30px', text: 'ここに書いてね'}
17        ],
18        ID: 0,
19        move: false
20    },
21    methods: {
22        getID(id) {
23            this.ID = id
24            if (this.move) {
25                this.move = false
26            } else {
27                this.move = true
28            }
29        },
30        getXY(event) {
31            if (this.move) {
32                this.list[this.ID].left = event.offsetX + 'px'
33                this.list[this.ID].top = event.offsetY + 'px'
34            }
35        }
36    }
37})

css
1#back {
2    width: 500px;
3    height: 500px;
4    position: relative;
5    background-color: lightgray;
6}
7
8p {
9    position: absolute;
10    margin: 0px;
11    cursor: move;
12}