Vue3 unable to assign API data to a variable

Consider the code below:

<template>
    <div class="row" style="padding-top: 5px;">
      <div class="col-md-12">
        <router-link to="/create" class="btn btn-info" role="button">New Supplier</router-link>&nbsp;
      </div>
    </div>
    <div class="row" style="padding-top: 5px;">
      <div class="col-md-12">
        <table class="table table-hover">
          <thead>
            <tr>
              <th>Name</th>
              <th>Phone</th>
              <th>Email</th>
              <th>Location</th>
              <th></th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="supplier in suppliers" :key="supplier.id">
              <td>{{supplier.name}}</td>
              <td>{{supplier.phone}}</td>
              <td>{{supplier.email}}</td>
              <td>{{supplier.location}}</td>
              <td><a href="#" class="btn btn-info" role="button">Edit</a></td>
              <td><a href="#" class="btn btn-danger" role="button">Delete</a></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
</template>

<script>
import axios from 'axios'

export default {
  name: "Index",
  data() {
    return {
      suppliers:null,
    }
  },
  mounted () {
    this.showData();
  },
  methods:{
    async showData(){
      await axios
        .get('http://localhost:8000/api/suppliers')
        .then(response => (this.suppliers = response.data))
        .then(console.log(this.suppliers))
    }
  }
};
</script>

If I console log response.data I can see the data from API but this.suppliers is null. That means this line is not working. this.suppliers = response.data What am I missing?