vue v-on:click.native event in router link

I have a router-link like below, I need to perform a certain action on clicking the router link. So I have added the @click.native event in the router-link. But that click native event is called at last i.e it is called only after all the components get loaded on the screen.

I need the "sideBarClicked()" function to be called before components render in the router view. Click events in the "v-icon" are working correctly as expected it called before the components get loaded in the screen

 <router-link
    v-for="item in topNavItems"
    :to="{ path: item.url }"
    @click.native="sideBarClicked()"
  >
    <v-icon size="18" @click="sideBarClicked" v-if="item.customicon"
      >${{ item.customicon }}</v-icon
    >
    <v-icon size="18" @click="sideBarClicked" v-else>{{
      item.icon
    }}</v-icon>
  </router-link>