객체 안에 객체 바인딩은 어떻게 하는 건가요?

[조승래]

데이터 : [
{'이름' : 'Jack', '정보' : { '나이' : 10, '성별' : '남' }},
{'이름' : 'Mary', '정보' : { '나이' : 11, '성별' : '여' }},
]

일 때

App.vue에서
{{ 데이터[0] }} 이렇게 쓰면 {'이름' : 'Jack', '정보' : { '나이' : 10, '성별' : '남' }} 이렇게 보여주잖아요?

그런데 첫번째 데이터에서 이름만 뽑아서 표시하고 싶은 경우
{{ 데이터[0].이름 }} 이렇게 쓰면 렌더링이 되질 않고 하얀 페이지가 나와버리는데 어떻게 해야하는 건가요?
[기대했던 결과 -> Jack]
{{ 데이터[0].정보.나이 }}
[기대했던 결과 -> 10]

근데 또 v-for를 사용할 땐 잘 됩니다;;
무슨 차이인지를 모르겠어요...
저는 한줄만 가져다가 보여주고 싶기 때문에 v-for를 사용하면 안되는 상황인데
검색을 아무리 해봐도 원하는 답은 보이질 않으니 답답해서 질문 드립니다.

[조승래]

console.log 에서는 되는데 왜 바인딩 할 때는 문제가 되는지가 궁금합니다.
가능하다면 그 방법도 알고 싶습니다.

[codingapple]

속성명들을 한글말고 영어로 바꿔보거나 크롬 콘솔창엔 뭐라고 뜨나 확인해봅시다

[글쓴이]

글