<div id="app">
  x: {{ mousePosition.x }}
  y: {{ mousePosition.y }}
</div>
const mousePosition = new Vue({
  data: () => ({
    x: 0,
    y: 0
  }),

  computed: {
    distanceFromOrigin() {
      return Math.sqrt(this.x ** 2 + this.y ** 2);
    }
  },

  methods: {
    created() {
      document.addEventListener("mousemove", this.update);
    },

    destroyed() {
      document.removeEventListener("mousemove", this.update);
    },

    update(e) {
      // don't have reference to $el
      //const rect = this.$el.getBoundingClientRect(); 
      this.x = e.clientX// - rect.left;
      this.y = e.clientY// - rect.top;
    }
  }
});

new Vue({
  el: "#app",

  data: () => ({
    mousePosition: mousePosition
  }),

  created() {
    this.mousePosition.created(); // should be called automatically
  },

  destroyed() {
    this.mousePosition.destroyed(); 
  }
});
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

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