Vue.jsにおいて、親コンポーネントの値を動的に子コンポーネントにわたす方法を教えて下さい

前提

Vue.jsにおいて、親コンポーネントの値を動的に子コンポーネントにわたす方法を教えて下さい

実現したいこと

2つの子コンポーネントのいいねの数を親コンポーネントで受け取り、更に別の子コンポーネントで合計のいいね数を表示しています。
親コンポーネントで表示しているいいね数をリセットする機能を実装したいのですが、合計のいいね数を0にできても子コンポーネントのいいね数を0に出来ません。

該当のソースコード

App.vue

1import LikeNumber from './components/LikeNumber.vue' 2 3<template> 4 <div> 5 <LikeHeader :totalNumber="number"></LikeHeader> 6 <LikeNumber @total-increment="increment"></LikeNumber> 7 <LikeNumber @total-increment="increment"></LikeNumber> 8 <button @click="reset">reset</button> 9 </div> 10</template> 11<script> 12import LikeHeader from './components/LikeHeader.vue' 13export default { 14 data(){ 15 return{ 16 number:0 17 } 18 }, 19 methods:{ 20 increment(){ 21 this.number += 1 22 }, 23 reset(){ 24 this.number = 0 25 } 26 }, 27 components:{ 28 LikeHeader 29 } 30} 31</script> 32

LikeHeader.vue

LikeNumber.vue

1<template> 2 <div> 3 <p>Good({{ number }})</p> 4 <button @click="increment">+1</button> 5 </div> 6 </template> 7 <script> 8 export default{ 9 export default{ 10 props:{ 11 number:{ 12 type:Number, 13 default:0 14 } 15 }, 16 methods:{ 17 increment(){ 18 this.number += 1; 19 this.$emit('total-increment', this.number) 20 } 21 } 22 } 23 </script> 24

試したこと

LikeHeaderのnumberはApp.vueのnumberに応じて変化するにも関わらず、reset()で0に変えてもLikeNumberのnumが変わらない理由がわかりません。

よろしくお願い致します。