Vue + jest onMountedで取得したデータがレンダリングされない

Question

Vue3 で作っているコンポーネントのテストを書こうとしています。

it('test', () => {
const wrapper = shallowMount(Target);
    console.log(wrapper.html())
    wrapper.find(".edit-button").trigger("click")
})

下記がテスト対象のコンポーネント(簡略化してます)ですが、上記のようにwrapper.html()を出力した際にv-forの部分が出力されません。そのためtrigger("click")も実行できません。
wrapper.vm.hoge を出力してみるとしっかりとclient.getHoge()で取得した値が取れています。

console.log(wrapper.html())段階ではhogeがnullなのでしょうか？
これはなぜでしょう？

  <div v-for="h in hoge" :key="h">
　　　　　　　　　<button class="edit-button" @click="edit(id)">編集</button>
　　</div>

    const hoge = ref(null)

    onMounted(async () => {
      const response = await client.getHoge()
      hoge.value = response.data.hoge
    })

<div>{{hoge}}</div> のようにしてもhogeは出力されていなかったので、やはりonMountedでhogeを取得する前のデータでレンダリングされていて、hogeを取得した後にdomが更新されていないのかな？と思いましたが、原因がわかりません。

まとめると、
wrapper.vm.hoge には値が入っているのでonMountedは実行されている事が分かります。
しかしwrapper.html()はそれが反映していない&trigger("click")できない、
という状況です。

こちら解決できる方いましたらお手数ですがご教示いただけますと幸いです。

---

補足でsetup全体を載せます。メソッドの中身など関係ない部分は一部省略します。

setup() {
    const router = useRouter()
    const store = useStore()
    const hoge = ref(null)

    onMounted(async () => {
      const response = await client.getHoge()
      hoge.value = response.data.hoge
    })

    const edit = (id) => {
      console.log("goEdit -> id", id)
      store.commit('huga/hugaEdit', id)
      router.push({ name: 'EditPage'})
    }

    return {
      hoge,
      edit
    }
}

ただ、これ一応解決していて、下記のようにテスト側で
wrapper.find(".edit-button").trigger("click")
の前に下記のように一瞬スリープを入れるとdomが更新されるようでした。
しかしなぜこのようにラグがあるのでしょうか・・・
vmの値が更新される→DOM更新となると思うのですが、sleepしないとvmが更新されているのにdomが更新されないというのも変な気がします・・・

const _sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
await _sleep(1);
wrapper.find(".edit-button").trigger("click")

Comments

[FKM]

見当はつくところはあるのですが、コンポーネント全体を見ないとなんとも言えません。
setup全体の提示お願いします。

[Hayato1201]

追記いたしました！