Why doesn't nested v-for work?

Question

Vue.js

Tell me what you missed? I do not understand why the list is not displayed. It looks like everything is connected.

new Vue({
  el: " #popup-modal",
  data() {
    return {
      listItem: [
        {
          title: 'text 1',
          object: [
            { name: '1', link: '#' },
            { name: '2', link: '#' },
            { name: '3', link: '#' },
          ]
        },
        {
          title: 'text 2',
          object: [
            { name: '1', link: '#' },
            { name: '2', link: '#' },
            { name: '3', link: '#' },
          ]
        }
      ]
    }
  },
  template: `
  <div id="popup-modal" class="hidden">
    <template v-for="item in listItem" :key="item.id">
    <div>
      <h3>{{ item.title }}</h3>
      <ul>
        <li v-for="{name, link} in listItem.object"><a :href="link" :title="name" target="_blank" rel="norefferer noopener">{{ name }}</a>
        </li>
      </ul>
    </div>
    </template>
  </div>
`
})

Answer 1

Should be item.objectinstead of listItem.object.
Why template? Remove. And move the v-for to a nested element.