How to correctly react to a promise in Vue/axios

I'm writing a signup form with Vue 3 and use axios to check if a username is already taken. My component looks like this:

<script setup>
  import { ref } from 'vue';
  import axios from 'axios';
  const nickname = ref('');
  function checkNickname() {
    if (nickname.value.length === 0) {
      return true;
    }
    return axios.post('localhost:8080/api/v1/public/account/nickname', nickname.value.toString().trim(), {
      headers: {
        'content-type': 'text/plain',
      }
    })
        .then(response => !Boolean(response.data), () => true);
  }
</script>
<template>
<div>
<form>
<input v-model="nickname" />
<span v-show="!checkNickname()">Nickname taken!</span>
</form>
</div>
</template>

Now my server returns a plain true when the submitted String is Admin and false otherwise. I checked that the post request actually receives these answers via the browser debugger. However, the error span is never shown. What am I doing wrong?