Conditional render breaks focus order

[Solant]

What package within Headless UI are you using?

For example: @headlessui/vue

What version of that package are you using?

For example: 1.4.2

What browser are you using?

For example: Chrome 96

Reproduction URL

https://codesandbox.io/s/focus-order-issue-g4tkc?file=/src/App.vue

Describe your issue

Toggle checkbox twice and then try to change the current tab with arrow keys. Newly rendered Tab 2 will be focused after Tab 3. This can be related to calling tabs.value.push() on <Tab /> render
( https://github.com/tailwindlabs/headlessui/blob/main/packages/%40headlessui-vue/src/components/tabs/tabs.ts#L81 )

[RobinMalfait]

Hey! Thank you for your bug report!
Much appreciated! 🙏

This should be fixed, and will be available in the next release.

You can already try it by using the insiders build npm install @headlessui/vue@dev or yarn add @headlessui/vue@dev.

Here is an updated codesandbox link with the bumped version: https://codesandbox.io/s/focus-order-issue-forked-gv0qq