Nuxt component data not fetched

Question

<template>
  <div>
    <h1>Index</h1>
    <button @click="showMe">BUTTON</button>
  </div>
</template>

<script>
export default {
  name: 'Index',

  async fetch ({ $axios }) {
    const result = await $axios.$get('https://api.sampleapis.com/beers/ale')
    console.log(result) // show arr that length 100.
    this.arr = result
  },

  data: () => ({
    arr: []
  }),

  methods: {
    showMe() {
      console.log(this.arr) // show arr that length 0.
    }
  }
}
</script>

The example on the official website is the same way.

But my this.arr is not updated.

What should I do to solve this problem?

This really drives me crazy.

why? Why the hell?

My Nuxt version is 2.15.8