Vuetify: update URL when tab in v-tab is clicked

I want to be able to update the URL when a user clicks on a tab defined in v-tab. That way, the url can be shared. When another user uses that shared url, they should be able to start with the same tab that's defined in the URL. Is this possible?

You can just attach a method to the @click event of the tab element, which will change the route on click.

If you want to automatically change the selected tab when the page is loaded, you can get the current route and simply set the tab in mounted() hook:

<v-tabs
  v-model="selectedTab"
>
  <v-tab
    v-for="tab in tabs"
    @click="updateRoute(tab.route)
  >
  ...

data () {
  return {
    selectedTab: 0,
    tabs: [
      {
        name: 'tab1',
        route: 'route1'
      },
      {
        name: 'tab1',
        route: 'route1'
      }
    ]
  }
},
mounted() {
  // Get current route name
  // Find the tab with the same route (property value) 
  // Set that tab as 'selectedTab'
  const tabIndex = this.tabs.findIndex(tab => tab.route === this.$route.name)
  this.selectedTab = tabIndex
},
methods: {
  updateRoute (route) {
    this.$router.push({ path: route })
  }
}