Performing validation before changing tab

[turbosheep44]

So when the user tries to change the tab, I want to perform validation on some elements within the form and only change the tab if that validation returns true.

I tried to use a combination of the @change event and the selected-index prop, based on what is shown in the docs like below.

<script setup lang="ts">
import { TabGroup, TabList, TabPanels, TabPanel, Tab } from '@headlessui/vue';

const selectedTab = ref(0)

function onChange(index: number) {
  if (!isValid()) return;
  selectedTab.value = index
}

function isValid() {
    // validation logic here...
    return false;
}
</script>

<template>
  <TabGroup :selectedIndex="selectedTab" @change="changeTab">
    <TabList>
      <Tab>Tab 1</Tab>
      <Tab>Tab 2</Tab>
      <Tab>Tab 3</Tab>
    </TabList>
    <TabPanels>
      <TabPanel>Content 1</TabPanel>
      <TabPanel>Content 2</TabPanel>
      <TabPanel>Content 3</TabPanel>
    </TabPanels>
  </TabGroup>
</template>

However, doing this causes the tab to change normally and also causes the selectedTab value to fall out of sync with the actual value.

Is it possible to do validation and then accept/reject the tag change from the event handler?