イベントシステムの理解に問題があります

<template>

  <div class="chart"
       v-bind:style="chartStyleObject"
       v-on:mousedown.left="initHandleMousedown($event)"
       v-on:mouseup.left="initHandleMouseup()"
       v-on:mouseout="initHandleMouseup()">

    <div class="chartContent">
    </div>
    <!--   <div class="chartContent">  end   -->

  </div>
  <!--   <div class="chart">   end   -->

</template>

<script>
  import axios from 'axios';

export default{

created () {
},

data () {
  return {
    ticket: null,

    chartStyleObject: {
      width: '500px',
      widthWrapper: '1600px',
      heightWrapper: '500px',
      height: '247px',
      marginTop: '15px',
      marginRight: '0px',
      marginBottom: '0px',
      marginLeft: '15px',
    },

    XCoord: null,
    YCoord: null,

  }
},

methods: {

  initHandleMousedown(event) {
    this.startMousedownXCoord = event.clientX;
    this.startMousedownYCoord = event.clientY;
    this.XCoord = event.clientX;
    this.YCoord = event.clientY;

    console.log('XCoord', this.XCoord);
    console.log('YCoord', this.YCoord);

    window.addEventListener('mousemove', this.initHandleMouseMove);
  },

  initHandleMouseMove(event) {

      this.XCoord = event.clientX;
      this.YCoord = event.clientY;

      console.log('XCoord', this.XCoord);
      console.log('YCoord', this.YCoord);

  },

  initHandleMouseup() {
    window.removeEventListener('mousemove', this.initHandleMouseMove);
  },

  },

}

</script>

<style scoped>

.chart{
  position: relative;
  border-radius: 10px;
  padding: 27px 10px 10px 10px;
  background-color: #45788b;
  box-sizing: border-box;
  cursor: move;
}
.chart .chartContent{
  position: relative;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  margin: 0 0 0 0;
  background-color: #2f2c8b;
}



</style>