Prevent tab change on PrimeVue TabView component

From the docs it looks like that internally the component will first switch tabs and then emit "tab-click", which explains the issue you're seeing. The exception is if the tab is disabled, in which case it won't change tabs but will emit "tab-click".

It took a bit to figure out, but there is a way to get the functionality you need with only a small adjustment. It requires a change in your main.js as well as in your App.vue file.

// main.js

/*
 * Put this after you import TabView.
 * This will prevent automatic tab switching but still emits
 * the event to your application.
*/
TabView.methods.onTabClick = function(event, tab, i) {
  this.$emit('tab-click', {
    originalEvent: event,
    tabInfo: tab,
    index: i
  });
}

// App.vue

const onTabClick = (event) => {
  if (changes.value) {
    confirm.require({
      message:
        "Are you sure that you want to leave this tab? You'll lose your changes",
      icon: "fal fa-exclamation-triangle",
      acceptLabel: "Yes",
      rejectIcon: "No",
      accept: () => {
        alert("here we should allow tab change");
        activeIndex.value = event.index; // manually set activeIndex
      },
      reject: () => {
        alert("stop tab change");
      },
    });
  }
};

These changes modify what the onTabClick library method to only emit the event, without automatically switching. Then in your app you can check the index property of the event to determine what should be set to active.

When implementing this solution, please be aware that it is not robust against changes to the underlying framework. If you do need a robust component, then you will have to implement a TabView yourself.