vue, node,mongoDB를 사용한 연습 중 오류관련 질문입니다

현재 HTML, css, JS기초, Vue.js, node.js, mongoDB 강의를 수강하고
처음으로 간단한 웹사이트 제작을 도전하고 있습니다

현재 vue에서 데이터를 가져올 때
vue에서 vuex store로 함수 실행 요청 -> store에서 node한테 get 요청 시 데이터 가져오기 요청 -> node는 get 요청받을 시 mongoDB에서 데이터 가져오기
이런 형식을 기반으로 데이터를 가져오고 있습니다.
외부 사이트에 api를 가져와서 데이터 바인딩을 하는 건 잘 반영이 잘 되는데 mongoDB에서 저장된 데이터를 가져올 때 밑에 현상이 일어납니다

<문제점>
/list로 접속 시 mongoDB에 있는 데이터를 가져와 보여주고 싶은데
접속 시 그 부분이 비어있음 or v-if 문으로 로딩 구현 시 계속 로딩을 보여줍니다 (참고로 console.log로 확인 시 데이터는 잘 받아왔습니다)

관련 오류와 코드는 사진으로 첨부하겠습니다

<Vue.js list>

<Vuex store 1>

<Vuex store 2>

<node.js 1>

<node.js 2>


<브라우저에서의 오류>

이런 식으로 값이 반영이 안되거나 가끔씩 새로고침하면
List.vue:2 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'name')
이렇게 시작하는 오류도 뜨면서 이럴 때는 저 p 태그를 포함해서 html이 다 공백 처리되는 경우도 있습니다.
비동기 관련해서 문제가 있는거같아 es6에 있는 비동기 강의도 들으면서 생각해봤는데 문제점을 못 찾겠습니다..

마지막으로 현재 node를 주로 사용하는 백엔드 개발자를 목표로 공부하고 있는데 이런 식으로 만들면서 배워나가면 괜찮을까요?
우선 es6 관련 문법 강의도 들으면서 공부하면서 만들고 있습니다.