The problem with the this keyword in arrow functions in Vue

Unfortunately, when Babel transpiles the this keyword inside an arrow function, it transpiles it to _this. That means that any of our methods will be broken and our apps won't work. The underlying cause for this is due to the fact that arrow functions are scoped differently than ES5 functions.

In the next section, we'll look at the recommended approach in defining functions inside the methods option of a Vue instance.

Recommended solutions to keyword problems

The recommended solution to the this keyword inside Vue components is to not use the arrow function syntax since it doesn't produce the expected results due to scoping issues. Specifically, arrow...