Use Vuetify Scroll Threshold app bar with Vue router - vuejs2

Question

Using Vue 2 and Vuetify, I am trying to implement the shrink on scroll threshold app bar found on the Vuetify page.
This works if I create a v-container on the main App.vue page as in the example on Vuetify's website, but it does not work when scrolling content located in a separate View being shown via the Vue router. Everything shows up but the app bar does not shrink when I scroll on the content being included by the router. How do I get the app bar to track the scrolling of the separate view?
App.Vue:
<template>
<v-app id="inspire">
...
<v-app-bar
app
color="#43a047"
dark
shrink-on-scroll
prominent
src="https://picsum.photos/1920/1080?random"
fade-img-on-scroll
scroll-target="#main"
scroll-threshold="500"
>
<template v-slot:img="{ props }">
<v-img
v-bind="props"
gradient="to top right, rgba(55,236,186,.7), rgba(25,32,72,.7)"
></v-img>
</template>
<v-app-bar-nav-icon #click="drawer = !drawer"></v-app-bar-nav-icon>
<v-toolbar-title>Grocery Manager</v-toolbar-title>
</v-app-bar>
<v-main style="overflow: auto" id="main">
<router-view></router-view>
</v-main>
</v-app>
</template>
HomeView.vue
<template>
<div class="home pa-6">
<h1>Home</h1>
... Lots of text ...
</div>
</template>
<script lang="ts">
import Vue from "vue";
//import HelloWorld from "../components/HelloWorld.vue";
export default Vue.extend({
name: "Home",
components: {
// Add components here
},
});
</script>