Move to next tab in F7 Vue cordova

my App.vue is like down below

<!-- Your main view/tab, should have "view-main" class. It also has "tab-active" class -->


<!-- 튜터카드 -->
<f7-view id="view-tutorCard" :main="isActiveTutorCard" :tab-active="isActiveTutorCard" tab url="/card/"></f7-view>

<!-- 스케줄 -->
<f7-view id="view-schedule" :main="isActiveSchedule" :tab-active="isActiveSchedule" tab url="/schedule/"></f7-view>

<!-- Enrollment View -->
<f7-view id="view-enrollment" :main="isActiveEnrollment" :tab-active="isActiveEnrollment" tab url="/enrollment/"></f7-view>

<!-- signup View -->
<f7-view id="view-chat_fill" tab url="/signup/"></f7-view>

<!-- Person View -->
<f7-view id="view-personalInfo"  :main="isActivePersonalInfo" :tab-active="isActivePersonalInfo" name="person" tab url="/inform/"></f7-view>

what i am trying to do is simply move to next tab menu from the current tab.
I tried to do it by manipulating tab-link-active and tab-active attribute, but it does not work because the tab-link-active and tab-active does not go away which is created when I clicked the tab menu.

if there is like removeClass(‘someClass’) like jQuery then it would work… but I could not figure out how to do that in Vue.js.

any Idea?

all i am trying to do is move to next tab menu from script function.

thanks

You need to use Tabs api like:

this.$f7.tabs.show('#view-enrollment')

https://framework7.io/docs/tabs.html#tabs-app-methods

I tried it and i got

TypeError: Cannot read property ‘show’ of undefined"

is that because it is in App.vue?