Data in Vue.component?

Question

JavaScript

Hello!
Need advice and help.
There is a markup:

<nav id="navbar">
  <navigation></navigation>
  <p>Hello, World!</p>
  <other-components></other-components>
</nav>

Collecting components:

Vue.component('navigation', {
  props: ['val'],
  data() {
    return {
      navlist: [
        { id: 'name-1', name: 'linkName-1'},
        { id: 'name-2', name: 'linkName-2'},
        { id: 'name-3', name: 'linkName-3'},
        { id: 'name-4', name:' linkName-4'},
        { id: 'name-5', name: 'linkName-5'}
      ]
    }
  },
  template: `
  <template v-for="val in navList" :key="val.id" :val="val">
    <ul>
      <li>
        <a :href=val.id  :title=val.name>{{ val.name }}</a>
      </li>
    </ul>
  </template>`
})

new Vue({ el: '#navbar' })

A few questions:
1. Do you always need to register new Vue, even if the instance is already defined in the markup?
2. in the documentation, vue.component can contain a template, but does not contain data, so my example above is not correct and need to transfer data() to the vue instance? But if I migrate, the normal markup <p>Hello, World!</p>disappears.
3. tell me how then to correctly write down the structure of the components and the instance so that everything works?

Answer 1

1. What does it mean to register? where to register? where to register? what are you talking about? give an example. You can make at least ten instances per page.
2. some kind of nonsense. why can't that? you pass the component config to .component(). the data option is part of the config.

but does not contain data

contains , like both the date and the template are
3. first, explain what you are trying to do. and explain that in your subjective terminology there is a component and an instance.