Vue

HTML

<div id="app">
  <div class="character" :style="`margin-left: ${x}px`">
    🐱‍🏍
  </div>
  <hr />
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
}

#app {
  background: #fff;
  padding: 20px;
}

.character {
  font-size: 25px;
}

Vue

new Vue({
  el: "#app",
  keys: {}, // this variable should be outside of reactive data
  data(){
    return {
			x: 0
    }
  },
  created () {
    window.addEventListener('keyup', this.keyup);
    window.addEventListener('keydown', this.keydown);
    
    setInterval(this.intervalKeysChecker, 20); 
  },
  methods: {
    keydown (e) {
    	this.$options.keys[e.keyCode] = true;
    },
    keyup (e) {
    	this.$options.keys[e.keyCode] = false;
    },
    intervalKeysChecker() {
    	const { keys = {} } = this.$options;
      
      if (keys[37]) this.onWalkLeftPressed();
      if (keys[39]) this.onWalkRightPressed();
    },
    onWalkLeftPressed() {
    	if(this.x >= 5) this.x -= 5;
    },
    onWalkRightPressed() {
    	this.x += 5;
    }
  }
})