Vue.js Ajaxを使った連動するセレクトボックス

１つ目のセレクトボックスの項目を非同期通信で取得。
そこで選択した項目を元に、２つ目のセレクトボックスの項目も非同期で取得する。

<div id="app">
  <select v-model="selected_category_id">
    <option v-for="item in category_list" :value="item.id">{{ item.name }}</option>
  </select>
  <div>{{ selected_category_id }}</div>
  <select v-model="selected_animal_id">
    <option v-for="item in animal_list" :value="item.id">{{ item.name }}</option>
  </select>
  <div>{{ selected_animal_id }}</div>
</div>

１つ目のセレクトボックス項目は created 内で取得。
２つ目のセレクトボックス項目は watch 内で取得。

new Vue({
  el: '#app',
  data: {
    category_list: [],
    selected_category_id: null,
    animal_list: [],
    selected_animal_id: null,
  },
  async created () {
    this.category_list = (await axios.get('http://localhost/animals/category/')).data
    this.selected_category_id = this.category_list[0].id
  },
  watch: {
    async selected_category_id () {
      this.animal_list = (await axios.get(`http://localhost/animals/animals/${this.selected_category_id}/`)).data
      this.selected_animal_id = this.animal_list[0].id
    },
  },
})

算出プロパティを使えるかと思ったけど、どうも非同期通信は使えないみたいで…。
そもそも算出プロパティは return で値を返すので、Promise では return を２回返すことはできないという…。