DOM 在 GET 请求完成之前加载计算属性，如何延迟？

我正在开发一个单页应用程序（Vue-Cli）。在 Vue 完成 GET 请求之前，DOM 正在寻找一个值。尽管应用程序/数据加载正常，但浏览器给了我一个恼人的控制台错误：Error in render: "TypeError: Cannot read property 'branch' of undefined".

这是我的模板/HTML 代码：

<template>

  <div>

    {{ branch[0].branch }}

  </div>

</template>

实例视图：

  data() {
    return {
      branches: [],
      issue: ''
    }
  },
  async created() {
    await this.getIssue()
    await this.getBranches()
  },
  methods: {
    async getIssue() {
      this.issue = (await axios.getIssue(this.$route.params.id)).data[0]
    },
    async getBranches() {
      this.branches = (await axios.getBranches()).data
    }
  },
  computed: {
    branch() {
      return this.branches.filter(
        branch => this.issue.branch === branch.branch_id
      )
    }
  }

我如何正确地“等待”分支完成加载，然后过滤分支数组并将其放置在DOM中？