Nuxt.js + Axios: How to call API client-side at the press of a button and display result

Question

I want to use Nuxt.js and Axios to call a REST API client-side by clicking a button and display the result. Using Firefox' DevTools I can see a new request each time I click "Calculate Square" in the Network tab, but it is not being displayed on the page. How can I display the result?

<!-- https://test-utils.vuejs.org/guide/advanced/http-requests.html#a-list-of-blog-posts -->
<!-- https://stackoverflow.com/questions/69778906/cant-get-data-from-api-with-axios-in-nuxt-components -->
<!-- https://test-utils.vuejs.org/guide/advanced/http-requests.html#a-list-of-blog-posts -->

<template>
  <button @click="getSquare">Calculate Square</button>
  <ul>
    <li data-test="square">
      {{ square }}
    </li>
  </ul>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      square: null
    }
  },
  methods: {
    async getSquare() {
      var base = Math.floor(Math.random() * 11)
      this.square = await axios.get('https://api.mathjs.org/v4/?expr='+base+'^2')
    }
  }
}
</script>