刚学的 props用法 报错啦

         <div id="app">
            <counter heading="yes" color="green"></counter>
            <counter heading="no" color="red"></counter>
        </div>
        <template id="counter-template">
            <div>
                <h1>{heading}</h1>
                <button @click="count+=1" style="background:{ color }">{count} </button>
            </div>
        </template>

    <script>

        Vue.component('counter',{
            template:'#counter-template',
            props:['heading','color'],
            data:function(){
                return {count:0};
            }
        });

        new Vue({
            el:"#app"
        });


    </script>

为什么我和视频里的是一样的代码 ，我的确报错呢

这个报错又是哪里造成的呢？这个报错是加上props之后的