vuejs2.0 directive

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
<div class="app">
  X:<input v-model="coords.x">
  Y:<input v-model="coords.y">
  <pre>{{computedCoords}}</pre>
  
</div>

CSS

.changed {
  color: red;
}

JavaScript

new Vue({
  el: '.app',
  screenCourt:{width: 1007, height: 538},
  court:{width:14760,height:26440},
  koefX:null,
  koefY:null,
  computed: {
    computedCoords: function() {
      var computed = {
        x: 0,
        y: 0
      };
      this.koefX = screenCourt.width / vm.court.width;
      this.koefY = screenCourt.height / vm.court.height;
     //https://jsfiddle.net/apokjqxx/97/
      var pointCoordX = 0;
      var pointCoordY = 0;
      
      
      
      var coordX =  parseInt(this.coords.x);
      //var coordY =  parseInt(this.coords.y);
      var halfCourtX = parseInt(this.court.x / 2);
      var halfCourtY = parseInt(this.court.y / 2);
      if (this.coords.x > 0) {
        computed.x = parseInt(halfCourtX  + coordX);
      } else {
				computed.x = parseInt(halfCourtX + coordX);
      }
     
     
			if (this.coords.y > 0) {
        computed.y = parseInt(halfCourtY - parseInt(this.coords.y));
      } else {
				computed.y = parseInt(halfCourtY + Math.abs(this.coords.y));
      }      
      
      return computed;
    },
  },
  data: {
    coords: {x:0, y:0},
    
  },
  created: function() {
   // this.coords.x = -4;
    //this.coords.y = 12;

  }
})