Vue: How to supply the layout component with dynamic props depending on router-view component's data - vue.js

Question

I'd like to have a layout component with a header component and a <router-view>, but the header component should receive different dynamic props depending on the data of the router-view component.
I'm agnostic to the way in which the layout architecture is being achieved: Either with nested routes or using a slot and passing the layout name via the route's meta field.
So, the header component should be passed in a dynamic prop from the view component - let's say Home.vue: If we go to route /home the router-view will be Home.vue and in Home.vue we have a reactive data field (i.e. scrolledDown) and the prop passed to the header component (i.e. theme) should depend on the value of this data field (scrolledDown).
The easiest way I can think of is using local state management (vuex or whatever), so that the view components (i.e. Home.vue) can store the reactive data and the layout component can grab it and pass it as prop to the header component. But maybe there are much better ways to accomplish this?
MainHeader.vue:
<template>
<div :class="`header--${theme}`">...</div>
</template>
<script>
export default {
props: ["theme"]
}
</script>
Layout.vue:
<template>
<div>
<main-header />
<router-view />
</div>
</template>
<script>
import MainHeader from "../MainHeader";
export default {
components: { MainHeader }
}
</script>
or alternatively:
App.vue:
<template>
<component :is="layout">
<router-view />
</component>
</template>
// script with `layout` data prop and layout component imports
Layout.vue:
<template>
<div>
<main-header />
<slot />
</div>
</template>
<script>
import MainHeader from "../MainHeader";
export default {
components: { MainHeader }
}
</script>
Home.vue:
<template>
<div>...</div>
</template>
<script>
export default {
computed: {
scrolledDown() { ... }
}
}
</script>