While the bottom nav is meant to be used with the vue-router, you can also programmatically control the active state of the buttons by using the active prop with the sync modifier—e.g. active.sync. Modify the value property to designate the synced value. A button is given a default value of its index with v-bottom-navigation.
The v-bottom-navigation component hides when scrolling up when using the hide-on-scroll property. This is similar to the scrolling techniques that are supported in v-app-bar. In the following example, scroll up and down to see this behavior.