Vue.jsでProvide Injectする際の値変更の時の備忘録

経緯

Vue.jsで子コンポーネント(injectしている側)側で値を変更しようとしたらコードレビューの際に指摘された。
どうやらベストプラクティスは親コンポーネント(Provide)側で値を変更する関数を書き、子コンポーネントでその関数を呼び出すことらしい。
参照:
https://ja.vuejs.org/guide/components/provide-inject

Provide(親)コンポーネント内部

<script setup>
import { provide, ref } from 'vue'

const location = ref('North Pole')

function updateLocation() {
  location.value = 'South Pole'
}

provide('location', {
  location,
  updateLocation
})
</script>

inject(子)コンポーネント内部

<script setup>
import { inject } from 'vue'

const { location, updateLocation } = inject('location')
</script>

<template>
  <button @click="updateLocation">{{ location }}</button>
</template>

結論

ドキュメントをしっかり読もうと思いました。。