Vue: ¿por qué this vale undefined?

Cuando usamos this en cualquiera de los lifecycle hooks (created, updated, …) tiene como valor undefined:

mounted: () => {
  console.log(this); // muestra "undefined"
},computed: {
  foo: () => { 
     console.log(this); // muestra "undefined"
  } 
}

¿Por qué se evalúa como undefined en estos casos?
Ambos ejemplos usan una función de flecha () => {}, que vincula esto a un contexto diferente de la instancia de Vue.
Según la documentación:

No use funciones de flecha en una propiedad de instancia o callback (por ejemplo, vm. $ Watch (‘a’, newVal => this.myMethod ())). Como las funciones de flecha están vinculadas al contexto principal, this no será la instancia de Vue como cabría esperar y this.myMethod no estará definido.

Para obtener la referencia correcta a this como la instancia de Vue, usa una función regular:

mounted: function () {
  console.log(this);
}

Alternativamente, también puede usar la abreviatura ECMAScript 5 para una función:

mounted() {
  console.log(this);
}

Esta publicación es un extracto de: https://medium.com/js-dojo/common-problems-with-vue-js-a5b6da6a1eba