Async method not waiting for a function - VUE

You aren't returning anything from the loadtags method, so the code doesn't wait.

Change this:

loadtags () {
  this.$axios
    .get(...

To this:

loadtags () {
  return this.$axios
    .get(...

async/await is more or less just sugar over Promises, so returning the Promise gives you something to await in the other method.

This is how I resolved this in my Vue application.

Before a user submits a new "tag" with submitNewTag() I need to check if it exists already in the list of tags, using async theTagExists().

submitNewTag() {
  this.clearError();

  this.theTagExists().then((res) => {
    if (!res) {
      console.log("TAG DOES NOT EXIST, SO ADD IT TO THE DATABASE");
      this.saveTagToDatabase();
    }
  });
},
async theTagExists() {
  console.log("CHECKING IF A TAG EXISTS");
  await axios.get(`${this.apiUrl}/alltags`).then((res) => {
    console.log("CHECKING IS DONE");
    this.tagExists = res.data.allTags.some(
      res =>
        res.name.trim().toLowerCase() ===
        this.newTag.tagName.trim().toLowerCase()
    );
  });
  console.log("RETURN THE RESULT");
  return this.tagExists;
},