Component template should contain exactly one root element Vue2?

Question

JavaScript

<div id="app">
        <counter></counter>
    </div>

    <template id="custom_template">
        <h1>Heading</h1>
        <button type="submit">
            @{{ counter }}
        </button>
    </template>

    <script type="text/javascript">

       Vue.component('counter', {
        template: '#custom_template',

        data: function () {
            return {
                counter: 0
            }
        }
    });

       new Vue({
           el: "#app",
       });
   </script>

Will return an error:

[Vue warn]: Error compiling template:


        <h1>Heading</h1>
        <button type="submit">
            {{ counter }}
        </button>
    

- 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.
 
(found in <Counter>)

Why?

Answer 1

h1 and button are on the same level. Vue doesn't allow it. You need to wrap them in a container.

<template id="custom_template">
      <div>
          <h1>Heading</h1>
          <button type="submit">
              @{{ counter }}
          </button>
      </div>
</template>