Nuxt head() does not wait asyncData response for head - vue.js

Question

I have a nuxt code like this
<template>
<section>
<div>Hello Nuxt</div>
</section>
</template>
<script>
const fetchTheme = () => {
return new Promise(function(resolve, reject) {
setTimeout(() => {
resolve({
title: "Fetched Title"
});
}, 100);
});
};
export default {
async asyncData() {
const theme = await fetchTheme();
return theme;
},
head() {
if (this.theme) {
return {
title: this.theme.title
};
} else {
return {
title: "Default title"
};
}
}
};
</script>
<style scoped>
</style>
While I do view source, it gives 'Default title' but I need the title fetched from API
Here is Code Code Sandbox

Answer 1

From the docs on asyncData:
Nuxt.js will automatically merge the returned object with the component data.
That means that what you're doing:
async asyncData() {
const theme = await fetchTheme();
return theme;
}
is analogous to this:
async asyncData() {
const theme = await fetchTheme();
return {
title: theme.title
};
}
Which means that the title is accessible by doing this.title instead of this.theme.title.
To fix this, simply modify the return format of asyncData, to return an object that has a theme property:
async asyncData() {
const theme = await fetchTheme();
return {
theme
};
}
This will properly add the theme property to the data property of the component.