VueJS 3 / Vuex — как отображать данные из вложенного результата json

Дорогие,

Я боролся с этим часами, даже следуя базовым учебникам.

Я пытаюсь отобразить некоторые данные в Json в своем проекте Vue 3, когда данные находятся в массиве, с помощью цикла я получаю все, что мне нужно, но если их нет в массиве, я получаю сообщение об ошибке или данные склеиваются.

Я создал хранилище vuex следующим образом:

const region = {
    state: {
        region: {}
    },
    mutations: {
        SET_REGION(state, region) {
            state.region = region
        }
    },
    actions: {
        getAllRegions({ commit }) {
            axios.get("/api/regions/get")
                .then(response => {
                    commit('SET_REGION', response.data)
                })
        }
    },
    getters: {
        getAllRegions (state) {
            return state.region
        },
        getDelegue (state) {
          return state.region.delegue
        }
    }
};

Когда я вызываю эти данные на своей странице, я получаю следующий результат:

[
 {
  id: 3,
  name: "Occitanie",
  agents: [ ],
  delegue: null
 },
 {
  id: 2,
  name: "Ile de France",
  agents: [ ],
  delegue: null
 },
 {
  id: 4,
  name: "Hauts de France",
  agents: [ ],
  delegue: null
 },
 {
  id: 1,
  name: "Grand Est",
  agents: [
   {
    lastname: "DOE",
    firstname: "John",
    phone: "+331234567890",
    user: {
     email: "[email protected]"
    }
   }
  ],
  delegue: {
   lastname: "DURSLEY",
   firstname: "Jake",
   phone: "+3309987654321",
   user: {
    email: "[email protected]"
   }
  }
 }
]

Результат мне кажется хорошим. Теперь в моем Vue я хотел бы отобразить данные, и здесь у меня возникают проблемы с данными «DELEGUE».

<div v-for = "region in myFunctionToRetrieveJsonData">
    <p>Name: {{ region.name }}</p> // WORKING

    <p v-for = "agent in region.agents">
        {{ agent.lastname + ' ' + agent.firstname }}<br> // WORKING
        {{ agent.phone }}<br> // WORKING
        <span v-for = "email in agent.user">{{ email }}</span> // WORKING

        // THIS WAY
        Delegue: {{ agent.delegue.lastname + ' ' + agent.delegue.firstname }} // NOT WORKING

        // ALSO THIS WAY
        Delegue: {{ agent.delegue[0].lastname + ' ' + agent.delegue[0].firstname }} // NOT WORKING

        // THE OTHER WAY
        <p v-for = "delegue in region.delegue">
            Delegue: {{ delegue }} // DISPLAY: DURSLEYJake+3309987654321{"email":"[email protected]"} NOT GOOD
        </p>
    </p>
</div>

Я получаю эту ошибку: Uncaught (in promise) TypeError: Cannot read properties of null (reading 'lastname')

Я так понимаю, что для ПОЛЬЗОВАТЕЛЕЙ я могу сделать цикл v-for, но в случае с DELEGUE я не могу получить доступ сразу, или если я делаю цикл, у меня все данные не разделены и я могу' т работать с ним.

У вас есть идеи?

Большое спасибо за Вашу помощь.

Логан