[Vue][Tabs] aria-controls attribute is missing when a TabPanel is rendered as a template with a component inside

[alexisdemay]

What package within Headless UI are you using?

@headlessui/vue

What version of that package are you using?

v1.6.7

What browser are you using?

N/A

Reproduction URL

https://stackblitz.com/edit/vite-hmu9oh?file=src/App.vue

Describe your issue

The aria-controls attribute is missing on the Tab when a TabPanel is rendered as a template with a component inside:

<TabGroup>
  <TabList>
    <Tab>Tab 1</Tab>
    <Tab>Tab 2</Tab>
    <Tab>Tab 3</Tab>
  </TabList>
  <TabPanels>
    <TabPanel as="template">
      <CustomPanel title="Title of Tab 1" content="Content of Tab 1" />
    </TabPanel>
    <TabPanel as="template">
      <CustomPanel title="Title of Tab 2" content="Content of Tab 2" />
    </TabPanel>
    <TabPanel as="template">
      <CustomPanel title="Title of Tab 3" content="Content of Tab 3" />
    </TabPanel>
  </TabPanels>
</TabGroup>

Maybe there is something wrong in my implementation, that is why I am creating this new discussion before opening a new issue.

I would really appreciate some help 🙏.