How to refer to one of the elements of the list?

Question

Vue.js

Made this list:

new Vue({
  el: '#masthead',
  data() {
    return {
      list: [
        {id: 0, name: 'name-1'}, 
        {id: 1, name: 'name-2'}, 
        {id: 2, name: 'name-3'}, 
        {id: 3, name: 'name-4'}, 
        {id: 4, name: 'name-5'}
      ]
    }
  },
})

I use a general template for pages and, as planned, each item from this list should be displayed on a specific page, for example, as a heading.
Tell me, how should I register so that only one of the items is displayed on the page, and not the entire list?
I added IDs, believing that it would be easier to rely on them, but I don’t understand how to refer to them.

ps I apologize in advance, perhaps I didn’t formulate the problem exactly, as I can paraphrase, I’ll write.

UPD:
Intended Structure

#masthead
        .content(v-for="item in list" data-title=  вывести сюда)
            h1 или сюда

In html it looks something like this, i.e. this I can do. But how to display only the second or third item?

<div id="masthead">
  <div 
    class="content" 
    v-for="item in list" 
    :key="item.id" 
    :data-title="item.name">
  <h1>{{ item.name }}</h1>
  </div>
</div>

Answer 1

list[0].name, list[1].name...
Or display each element in turn where you need:

list.map(item, k => {
<h1 key={k + item.id}>{item.name}</h1>
})

//Можно с условием: //
list.map(item, k => {
if(item.id === 3) {
<h1 key={k + item.id}>{item.name}</h1>
} else {
null **(something  else)**
}
})

Answer 2

{{ header(1) }}

methods: {
  header(id) {
    let el = this.list.find((item) => {
      return item.id === id
    })
    return el.name
  }
}