How to initialize data with computed value inside asyncData?

I am building a web app with nuxt.

here's simplified code:

pages/index.vue

data() {
 return {
  item: {name:'', department: '', testField: '',},
 }
}
async asyncData() {
  const result = call some API

  const dataToInitialize = {
   name: result.username,
   department: result.department,
   testField: //want to assign computed value
  }
  return {item: dataToInitialize}
}

Inside asyncData, I call API and assign value to dataToInitialize. dataToInitialize has testField field, and I want to assign some computed value based on username and department. (for example, 'a' if name starts with 'a' and department is 'management'..etc there's more complicated logic in real scenario)

I have tried to use computed property , but I realized that asyncData cannnot access computed.

Does anyone know how to solve this? Any help would be appreciated!

=======

not sure if it's right way, but I solved the issue by setting 'testfield' inside created.

created() {
    this.item.testField = this.someMethod(this.item);
},

Solution 1:

Looking at the Nuxt lifecyle, you can see that asyncData is called before even a Vue instance is mounted on your page.
Meanwhile, fetch() hook is called after. This is non-blocking but more flexible in a lot of ways.

An alternative using fetch() would look like this

<script>
export default {
  data() {
    return {
      staticVariable: 'google',
    }
  },
  async fetch() {
    await this.$axios(this.computedVariable)
  },
  computed: {
    computedVariable() {
      return `www.${this.staticVariable}.com`
    },
  },
}
</script>

Another alternative, would be to use URL query string or params, thanks to Vue-router and use those to build your API call (in an asyncData hook).
Here is an example on how to achieve this: https://stackoverflow.com/a/68112290/8816585


EDIT after comment question
You can totally use a computed inside of a fetch() hook indeed. Here is an example on how to achieve this

<script>
export default {
  data() {
    return {
      test: 'test',
    }
  },
  async fetch() {
    const response = await fetch(`https://jsonplaceholder.typicode.com/todos/${this.nice}`)
    console.log(await response.json())
  },
  computed: {
    nice() {
      return this.test + 'wow!'
    },
  },
}
</script>