Vue Composition API（typescript）で非同期通信でデータ描画

Question

typescriptでvue composition apiを使用しています（nuxtに導入）

やろうとしていること

axiosにてAPIリクエスト後、データをtemplateに表示
getBookでapiリクエストを行い、リアクティブな変数bookにレスポンスを代入してます

できないこと

非同期でレスポンスを受け取るのですが、まだ受け取ってない状態で、bookのtitleをtemplateに描画することができない
bookのみであれば表示可能 -> {{ book }}
bookのtitleを指したとき表示不可 -> {{ book.title }}

Cannot read property 'title' of undefined
非同期なのでデータが取れておらず、存在しないプロパティtitleを参照してしまいエラーとなります。

type Book = {
  bookId: number
  title: string
}

<template>
  <div>
    {{ book.title }}
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from '@vue/composition-api'

const getBook = () => {
  const book = ref<Book>()

  const getData = () => {
    axios.get(`api-url`).then((res) => {
      book.value = res.data
    })
  }

  onMounted(() => {
    getData()
  })

  return {
    book
  }
}

export default defineComponent({
  setup () {
    const book = getBook()

    return {
      book
    }
  }
})
</script>

質問

初期化すれば、レスポンスが得られるまでからの値を表示することはできるのですが、これよりもっとスマートな方法はありませんか？値やプロパティが増えるたびに、初期がコストが掛かるので微妙だと思っています。

  let book = ref<Book>()
  book = {
    title: ''
  }

そしてこの方法だとリアクティブになりません。

<input type="text" v-model="book.title">
{{ book.title }}

inputでbook.titleを書き換えても{{ book.title }}は変わらない。