Cannot access object property inside of promise, but can access whole object

For context, I am using Vue3, and the following code is inside the onMounted function of a component:

SettingsPage.vue:

    onMounted(async () => {

    // Fetch available locales from API
    availableLocales.value = await api.locale.getLocales().then((response => response.locales))

    // Fetch user settings from API
    var settings = await api.user.getUserSettings().then(response => {

    console.log(response.userSettings) 
    // Correctly displays the object, including all the values of all properties correctly
    //{mainLocale: ?, darkMode: ? etc...}
    console.log(response.userSettings.mainLocale)
    // Displays undefined

The api call is in another file:

api.ts

    getUserSettings: async (): Promise<UserSettingsResponse> => {
      return await axiosService.get(`/api/user/settings/get`).then((response) => response.data);
    },

The problem is displayed in the comments, I can successfully print the whole object, getting all the relevant information correctly, but I am not able to fetch a single property from within the object, as it returns “undefined”.

I have looked around and tried various “hacks”, such as JSON.parse(JSON.stringify(response.userSettings)), and nothing has worked.