How to output multiple lines in a vue.js component?

Question

JavaScript

Today I started learning vue.js, I ran into a problem, googling did not give any results.
In general, there is the following code:

var login = Vue.component('login', {
    template: '#login-form',
    data: function(){
      return {
        name: '',
        password: '',
        labelName: 'Имя',
        labelPassword: 'Пароль',
        labelSubmit: 'Отправить',
      }
    },
    created: function(){ }
  });

  new Vue({ el: '#vue-app', components: {login: login}, });

I plan to use this component as an authorization form.
Template output:

<div id="vue-app">
        <login></login>
      </div>

The template itself, for the test, works in this form:

<template id="login-form">
      <div>@{{ labelName }}</div>
</template>

But it’s worth adding something else to the output, how everything crashes:

<template id="login-form">
      <div>@{{ labelName }}</div>
     <div>@{{ labelPassword }}</div>
</template>

I get the error: Error compiling template: Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.
Tell me what I'm doing wrong.

Answer 1

<div>
      <div>@{{ labelName }}</div>
     <div>@{{ labelPassword }}</div>
</div>

exactly one root element