propsをscript内で扱う

App.vue(親コンポーネント)

<template>
<div>
  <LikeHeader></LikeHeader>
  <h2>{{ number }}</h2>
  <LikeNumber :total-number="number"></LikeNumber>
  <LikeNumber :total-number="number"></LikeNumber>
</div>
</template>

<script>
import LikeHeader from "./components/LikeHeader.vue";

export default {
  data() {
    return {
    number: 10
    };
  },
  components: {
    LikeHeader: LikeHeader
  }
};
</script>

<style scoped>
  div {
    border: 1px solid blue;
  }
</style>

LikeNumber.vue(子コンポーネント)

<template>
<div>
  <p>いいね({{ halfNumber }})</p>
  <button @click="increment">+1</button>
</div>
</template>

<script>
export default {
  props: ["totalNumber"],
  computed: {
    halfNumber() {
      return this.totalNumber / 2;
    }
  },
  methods: {
    increment(){
      this.number += 1;
      }
    }
};
</script>

<style scoped>
  div{
    border:1px solid red;
  }
</style>