Свойство установлено неопределенным при перезагрузке / обновлении страницы

Question

У меня есть medications объект следующим образом:

medications: [
 {
    'name': 'abc',
    'id': naks23kn,
    'resident': //this is resident id, resident is another object
     .........
 },
 {.......},.....
 ]

Я хотел добавить другое поле residentName в этот список объектов или есть какой-либо способ, чтобы я мог отобразить residentName в v-data-table?:

 medications: [
 {
    'name': 'abc',
    'id': naks23kn,
    'resident': //this is resident id, resident is another object
    'residentName': 'ad' //set this new field
     .........
 },
 {.......},.....
 ]

Я использую `v-data-table> as:

<v-data-table
  :headers="headers"
  :items="medications"
  :items-per-page="20"
  :search="search"
  class="elevation-23"
>

Теперь я хочу добавить поле residentName на основе поля резидента. Для этого я сделал следующее:

export default {
data() {
    return {
       medications: [],
    }
},
 computed: {
  ...mapGetters([
    'allMedications', //this is used to get all medication from medication store
    'getResidentsById',
  ]),
},
created() {
   this.get_resident_list(),
   this.get_registered_medication_list();
},
methods: {
  ...mapActions([
    'get_registered_medication_list', //this is used to call API and set state for medication
    'get_resident_list', //this is used to callAPI and set state for resident
  ]),
  getResidentName(id) {
    const resident = this.getResidentsById(id)
    return resident && resident.fullName
  },
},
watch: {
 allMedications: {
  handler: function () {
    const medicationArray = this.allMedications;
    console.log("Created this");
    this.medications = medicationArray.map(medication => ({
        ...medication,
        residentName: this.getResidentName(medication.resident)
    })
    );
  },
  immediate: true
  },
 }
}

Это в resident.js модуле получения

getResidentsById: (state) => (id) => {
    return state.residents.find(resident => resident.id === id)
}

Это установка residentName только при создании компонента, но если я reload/refresh, затем устанавливается residentName = undefined.