NuxtでWatchを使う時にアロー関数を使ってはならない

結論

表題の通り。
Nuxtでカスタムウォッチャを使う時はアロー関数で書いてはならない。
アロー関数で書くと、thisがundefinedになってしまい、コンポーネントの要素へ全くアクセスできなくなってしまう。

カスタムウォッチャって？

Vueが用意してくれているプロパティを監視して、変更があれば任意の処理を実行してくれる仕組み
カスタムウォッチャ

コード例

わるい例

bad.vue

<script>
export default {
  components: {
  },
  data() {
    return {
      value
    }
  },
  watch: {
    value: newValue => {
      console.log('newValue:', newValue)
      console.log('this:', this) //=> undefinedになる
      this.hoge() //=> VueComponentにアクセスできないのでエラー
    }
  },
  methods: {
    hoge() {
      console.log('hoge')
    }
  }
}
</script>

よい例

good.vue

<script>
export default {
  components: {
  },
  data() {
    return {
      value
    }
  },
  watch: {
    value: function(newValue) {
      console.log('newValue:', newValue)
      console.log('this:', this) //=> VueComponent{...}
      this.hoge() //=> 正しくログがでる
    }
  },
  methods: {
    hoge() {
      console.log('hoge')
    }
  }
}
</script>

教訓

watchに関わらず、アロー関数のthisはその関数を呼び出した時に決定されるらしい。
ちゃんとドキュメントを読みましょうってことでした。
この記事に詳しく書かれています
Vue.jsに書いてある「アロー関数は、this が期待する Vue インスタンスではなく・・・」とは？

こちらの記事のコメント欄も参考になりました
Vue.jsでアロー関数を使うと詰む