Not able to get global errorHandler work vue2

[praveshishere]

Vue2

I was trying to implement an optional error capturing mechanism somehow, where if an api throws an error, I can catch it either in the component if required else the global error handler catches it and shows a warning toast or something.

For some reason it was working fine before, I don't how what is broken but it doesn't work now for me, In my project global error handler catches an error thrown in created but does not catch one if it is thrown in loadData

Reproduction
https://stackblitz.com/~/github.com/praveshishere/vue_errorHandler?file=src%2FApp.vue

errrorHandler

import Vue from "vue";

export function extractErrorMessage(error) {
  if (error.response) {
    const errorData = error.response.data;
    const errorMessage = errorData.msg || errorData.message.msg || errorData.message || "Something went wrong!";
    return errorMessage;
  }
  else if (error.request) {
    // axios request error
    return "API Request Failed!";
  }

  else {
    return error.message;
  }
}

function errorHandler(error) {
  const errorMessage = extractErrorMessage(error);
  console.log("Error caught", errorMessage)
}

Vue.config.errorHandler = errorHandler;

Case 1 - I throw error in loadData, it is not caught

<script>
import HelloWorld from './components/HelloWorld.vue'

import { failingApi } from "@/api/dummy";

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  async created() {
    // await failingApi();
    this.loadData();
  },
  methods: {
    async loadData() {
      await failingApi();
    }
  }
}
</script>

---

Case 2 - I throw error in created, it gets caught by global errorHandler

<script>
import HelloWorld from './components/HelloWorld.vue'

import { failingApi } from "@/api/dummy";

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  async created() {
    await failingApi();
    // this.loadData();
  },
  methods: {
    async loadData() {
      await failingApi();
    }
  }
}
</script>