How to share v-model between navigation drawer list and app bar toolbar? (vue 2)

[ghost]

Hello. My app is set up to use different layout configurations on desktop and mobile

Mobile: Navigation Drawer is used for site navigation, app bar toolbar is hidden
Desktop: App bar toolbar is shown, navigation drawer is hidden

I'm trying to share a common model between these two components so that they stay in sync.. and I'm having trouble

What's the best way to get my v-list navigation selection to stay synced up with activeTab used by my v-tabs? Using @click on the list item is the only half-working solution I've come up with, but then there is no default value on page load. No matter where I set the v-model for the nav drawer list, it's not binding as I'd expect it to

<v-app dark>
    <v-navigation-drawer
      v-if="$vuetify.breakpoint.xsOnly"
      v-model="drawer"
      mini-variant
      fixed
      right
      app
    >
      <v-list>      <!-- I've tried vmodel here -->
        <v-list-item-group>      <!-- and here -->
          <v-list-item           
            v-for="tab in tabs"
            :key="tab.title"
            :to="tab.to"
            nuxt
          >          <!-- and here -->
            <v-icon v-if="tab.icon">
              {{ tab.icon }}
            </v-icon>
            <v-list-item-content>
              <v-list-item-title v-text="tab.title" />
            </v-list-item-content>
          </v-list-item>
        </v-list-item-group>
      </v-list>
    </v-navigation-drawer>
    <v-app-bar
      fixed
      app
    >
      <v-toolbar-title v-text="title" />
      <v-app-bar-nav-icon v-if="$vuetify.breakpoint.xsOnly" @click.stop="drawer = !drawer" />
      <template
        v-if="!$vuetify.breakpoint.xsOnly"
        #extension
      >
                           <!-- I want this to sync with the navigation drawer -->
        <v-tabs
          v-model="activeTab"  
        >
          <v-tab
            v-for="tab in tabs"
            :key="tab.title"
            :to="tab.to"
            nuxt
          >
            <span v-if="!tab.icon_only">{{ tab.title }}</span>
            <v-icon v-if="tab.icon">
              {{ tab.icon }}
            </v-icon>
          </v-tab>
        </v-tabs>
      </template>
    </v-app-bar>
    <v-main>
      <v-container>
        <v-row justify="center" align="center">
          <v-col cols="12" lg="8" xl="6">
            <Nuxt />
          </v-col>
        </v-row>
      </v-container>
    </v-main>
  </v-app>