Vue.jsの子コンポーネントをリロード・再レンダリングさせる方法

Vue.jsで子コンポーネントを再マウントさせたい、子コンポーネントのステートをリフレシュさせたい。
そんなときの対処法。
まずは以下のような子コンポーネントがあります。

Child.vue

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">increment</button>
  </div>
</template>

<script>
export default {
  setup() {
    const count = ref(0)
    const increment = () => {
      count.value++
    }
    return {
      count,
      increment
    }
  }
}
</script>

v-ifで再マウント

v-ifを使うことによってDOMでレンダリングされなくなり、再度活性化することで再計算されます。
単純にフラグだけを変えると再計算が行われない可能性があるのでnextTickを利用してDOM更新を待って再計算を実行させます。

Parent.vue

<template>
  <div>
    <child v-if="resetFlag" ref="component" />
    <button @reset="reset">reset</button>
  </div>
</template>

<script>
import Child from './Child.vue'

export default {
  components: {
    Child
  },
  setup() {
    const component = ref(null)
    const resetFlag = ref(false)
    const reset = () => {
      resetFlag.value = true
      component.value.$nextTick(() => {
        resetFlag.value = false
      })
    }
    return {
      component,
      resetFlag,
      reset
    }
  }
}
</script>

keyで再マウント

v-forでおなじみのkeyですが、keyが変更される度にコンポーネントを破棄・再マウントという処理を利用することができます。
手軽に再マウントしてくれるのでこの方法が手っ取り早くて良いと思います。

Parent.vue

<template>
  <div>
    <child :key="resetKey" ref="component" />
    <button @reset="reset">reset</button>
  </div>
</template>

<script>
import Child from './Child.vue'

export default {
  components: {
    Child
  },
  setup() {
    const resetKey = ref(0)
    const reset = () => {
      resetKey.value++
    }
    return {
      resetKey,
      reset
    }
  }
}
</script>

最後に