<div id="app" :style="{backgroundColor: `hsl(${x}, 80%, 50%)`}" @mousemove="xCoordinate">
  <p>
    <button @click="increment">+</button>
    {{ counter }}
    <button @click="decrement">-</button>
  </p>
  <p>Pixels across: {{ x }}</p>
</div>
/* Google Fonts */
@import url(https://fonts.googleapis.com/css?family=Open+Sans);

/* set global font to Open Sans */
body {
  font-family: 'Open Sans', 'sans-serif';
  background-image: url(http://benague.ca/files/pw_pattern.png);
}

button {
  border-radius: 5px;
  padding: 15px 25px;
  font-size: 22px;
  text-decoration: none;
  margin: 20px;
  color: #fff;
  position: relative;
  display: inline-block;
  background-color: #55acee;
  box-shadow: 0px 5px 0px 0px #3C93D5;
  border: none 0;
}

button:active {
  transform: translate(0px, 5px);
  box-shadow: 0px 1px 0px 0px;
  outline: none 0;
}

button:hover {
  background-color: #6FC6FF;
}
button:focus {
  outline: none 0;
}
p {
  text-align: center;
}
#app {
  width: 100vw;
  height: 100vh;
  padding: 15vmin;
  font-size: 30px;
  transition: 0.2s background-color ease;
}
View Compiled
new Vue({
  el: '#app',
  data() {
    return {
      counter: 0,
      x: 0
    }
  },
  methods: {
    increment() {
      this.counter++
    },
    decrement() {
      this.counter--
    },
    xCoordinate(e) {
      this.x = e.clientX
    }
  }
})
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js