Unable to parse button tags of template using component in Vuejs

as mentioned, the button tag in template cannot be displayed,

the HTML code is as follows

  <div id="app">
        <counter></counter>
        <counter></counter>
        <counter></counter>
    </div>
    <template id="counter-temp">
        <h1>Hello Vuejs!!</h1>
        <button>{{count}}</button>
    </template>

the JS code is as follows

Vue.component("counter",{
       template:"-sharpcounter-temp",
       
       data: function () {
        return {count: 0};
       }
      });
     new Vue ({
         el: "-sharpapp",
     });
Mar.09,2021

the component template of vue requires a single root, your counter-temp is not a single root, just put a div on the outside of H1 and button.

<template id="counter-temp">
 <div>
  <h1>Hello Vuejs!!</h1>
  <button>{{count}}</button>
 </div>
</template>
Menu