[Vuejs]-Framework 7 Vue how to stop Firebase from listening to changes when on different pages?

Are you properly removing the listener for that specific database reference? You’ll have to save the referenced path on a dedicated variable to do so:

let userRef
export default {
    mounted() {
        this.$f7ready(() => {
            this.userChanges();
        })
    },
    methods: {
        userChanges() {
            userRef = Firebase.database().ref('users/1')
            userRef.on('value', (resp) => {
                console.log('use data has changed');
            });
        },
        detachListener() {
            userRef.off('value')
        }
    }
}

That way you only detach the listener for that specific reference. Calling it on the parent, would remove all listeners as the documentation specifies:

You can remove a single listener by passing it as a parameter to
off(). Calling off() on the location with no arguments removes all
listeners at that location.

More on that topic here: https://firebase.google.com/docs/database/web/read-and-write#detach_listeners