Vueの子コンポーネントでpropsの変更を検知する

parent.vue

<template>
  <childComponent name="foo">
</template>
// 略

child.vue

<template>
  <div>{{ awesomeName }}</div>
</template>
<script>
export default {
  props: {
    name: String
  },
  data () {
    return {
      awesomeName: this.name
    }
  }
</script>

こういう時、親から渡す値が変更された際に検知するにはpropsをwatchで監視する。

child.vue

// 略
<script>
export default {
// 略
    watch {
      name (newName) {
        this.awesomeName = newName;
      }
    }
// 略
</script>

おういえ🤩