ref がリアクティブになってないような気がする

Composition API でロジックを分離していて、local state や API fetch などをまとめたファイル(composable とか hooks みたいなやつ)を書いて、それをuseXxx関数でまとめて、その関数をコンポーネントの setup 内で import するというごく普通のことをやっていた。

Vue 3 Composition API で async-await を使う方法 | devsakaso

大体 ↑ のような感じ。

// composable.ts
export const useHoge = () => {
  const state = ref('')

  const fetchApi = async () => {
    const response = api.get()
    state.value = response
  }
}

// Component.vue
setup() {
  const { state, fetchApi } = useHoge()

  fetchApi()

  return { state: state.value }
}

めっちゃ簡略化するとこんな感じで、たぶんごく普通のことをやっていると思うんだけど、これをやっているのに state がずっと初期値(↑ のコードでいうと'')のまま変わらなくてうんうんうなっている。つらい。