请教为什么第二个组件不能渲染

粉丝福利 : 关注VUE中文社区公众号，回复视频领取粉丝福利

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		 
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		 
	</head>
	<body>
		 
		 <div id="app10">
			  
			 <button-counter/>
			 <br />
			<button-countera></button-countera>
			<div  >
				不能显示
			</div>
		 </div>
		<script src="index.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>

index.js

  // 定义一个名为 button-counter 的新组件
  Vue.component('button-counter', {
    data: function () {
      return {
        count: 0
      }
    },
    template: '<button v-on:click="count++">You clicked me  {{ count }} times.</button>'
  })
  
Vue.component('button-countera',{
	data:function(){
		return {
			count:0,
			
		}
	},
	template:'<button v-on:click="count++">Click me {{count}}</button>'
})


var app10=new Vue({
	el:"#app10",
	 
})

为什么button-countera 不能显示出来呢