Vue.js Асинхронный обход

Question

1. Откройте страницу, получите sexList и clientList с сервера
2. Пройдите 2 набора данных, нажмите sexText в clientList

Но код не работает.Как я могу изменить свой код?

Код здесь:

let sexList = [// store data: sexList
  {
    code: 0,
    sexText: 'female',
  },
  {
    code: 1,
    sexText: 'male',
  }
]

let clientList = [// index data: clientList
  {
    name: 'john',
    sexCode: 1,
  },
  {
    name: 'joe',
    sexCode: 0,
  }
]

mounted() {
  this.$store.dispatch('getSexList')// get sexList form the server

  getClientList({data: 'clients'}).then((res) => {
    if(res.data.success) {
      this.clientList = res.data.data// get clientList form the server
    }else {
      this.$message.error(res.data.message)
    }
  }).catch((err) => {
    console.log(err)
  })
},
watch: {
  /*
   watch clientList，traversing cientList and sexList，push the sexText into the clientList
  */
  clientList(val) {
    if(val && val.length > 0) {
      val.map((item) {
        this.$store.getters.sexList.map((sex_item) => {
          if(sex_item.sexCode == item.sexCode) {
            item.sexText = sex_item.sexText
          }
        })
      })
    }
  },
}

После редактирования он работает

setTimeout(() => {  
  getClientList({data: 'clients'}).then((res) => {
    if(res.data.success) {
      this.clientList = res.data.data// get clientList form the server
    }else {
      this.$message.error(res.data.message)
    }
  }).catch((err) => {
    console.log(err)
  })
}, 1000)

let clientList = [// index data: clientList
  {
    name: 'john',
    sexCode: 1,
    sexText: 'male',
  },
  {
    name: 'joe',
    sexCode: 0,
    sexText: 'female',
  }
]

Есть другой способ?