Mutations of data in arrow functions declared as instance variables are ignored #67
Description
In the following example, mutations of this.width and this.height in onResize do not actually change the size of the div element.
<template> <div v-bind:style="{ background: 'red', width: width + 'px', height: height + 'px' }"></div> </template> <script> import Vue from 'vue' import Component from 'vue-class-component' @Component export default class FollowWindowSize extends Vue { width = window.innerWidth height = window.innerHeight onResize = () => { this.width = window.innerWidth this.height = window.innerHeight } mounted() { window.addEventListener('resize', this.onResize) } destroyed() { window.removeEventListener('resize', this.onResize) } } </script>This is because, after the babel transpilation, onResize is declared inside constructor, which is executed before the wrapping of the data with getters and setters by Vue.js take place, and therefore mutations of data in onResize are not handled by these setters.
I confirmed that this is also the case when TypeScript is used.