Javascriptのobjectに入ってるfunctionの中のthisのスコープがアロー関数と普通の関数で違うっぽい

Javascriptでご飯を食べてる人にとっては、今更な話題かもしれませんが、、、

Objectに追加した関数内の"this"のスコープが、普通の関数とアロー関数で違ってくるのに気付きました。

const methods = {
  test_function: function () {
    console.log(this);
  },
  test_arrow: () => {
    console.log(this);
  }
}

chromeのコンソールで試した画像がこちら

コンソールではアロー関数だとWindowがスコープになってるみたいです。

最近覚えてカッコつけてアロー関数を使い始めたんです。() => {}みたいなアロー関数。見た目がなんとなく格好良い。でもfunction() {}みたいなコテコテの普通の関数とは少し挙動が違うみたい。

今日Vueをいじっていたら、スコープの挙動がどうやら違うらしい事に気付きました。そこでこのポストの件にぶち当たりました。Vue内だと、普通の関数だと上のスクショの様にobjectが平積み（って言って良いのかな？）だけど、アローだと"a"の入れ子になっちゃう。

そのまま見過ごして不可解なバグになるところだったので、おかげさまで運が良い一日を過ごせました。なんかよくわからないけど色々ありがとう。