How to pass <slots> content (provided by router-view) data back to component where slot is declared - vue.js

Question

I have 3 components: App.vue (Entry point), slotWrapper.vue (Wrapping component), About.vue (Page Content).
Inside the 'App.vue' i have the router-view setup which is wrapped with 'slotWrapper.vue' component. The 'slotWrapper' component has a <slot> where the current route will be rendered.
My question: Inside the About.vue page (which will be rendered instead of the <slot>, of the slotWrapper.vue component) I have a computed value which I somehow need to pass back to 'slotWrapper.vue' component to use. How would I achieve such a thing.
I looked into ScopedSlots but I can't figure our how to use it where the content rendered is provided by a router.
Link to: CodeSanbox
App.Vue
<template>
<div id="app">
<slotWrapper>
<router-view />
</slotWrapper>
</div>
</template>
<script>
import slotWrapper from "./components/SlotWrapper.vue";
export default {
name: "app",
components: {
slotWrapper,
},
};
</script>
SlotWrapper.vue
<template>
<div class="wrpperClass">
<slot />
</div>
</template>
<script>
export default {
name: "SlotWrapper",
};
</script>
<style scoped>
.wrpperClass {
width: 50%;
height: 50%;
color: black;
background-color: lightblue;
}
</style>
About.vue
<template>
<div id="app">
<slotWrapper>
<router-view />
</slotWrapper>
</div>
</template>
<script>
import slotWrapper from "./components/SlotWrapper.vue";
export default {
name: "app",
components: {
slotWrapper,
},
};
</script>
<style>
#app {
margin: 60px;
}
.link {
display: inline-block;
padding: 10px;
}
.router-link-active {
color: green;
}
</style>
Router: index.js
import Vue from "vue";
import Router from "vue-router";
import About from "../components/About";
Vue.use(Router);
export default new Router({
mode: "history",
routes: [
{ path: "/", redirect: "about" },
{
path: "/about",
component: About
// props: (route) => ({ name: route.query.name })
}
]
});

Answer 1

For those who might face this issue. I figured that you can pass props to <router-view> and listen to emits. Since you can listen to emits I simply emit from the about.vue page and listen on the app.vue, and later using props I pass the variable down to slotWrapper.vue.
App.vue
<template>
<div id="app">
<slotWrapper :propToPass="propToPass">
<router-view #comp-data="receiveFunction" />
</slotWrapper>
</div>
</template>
<script>
import slotWrapper from "./components/SlotWrapper.vue";
export default {
name: "app",
data() {
return { propToPass: null };
},
components: {
slotWrapper,
},
methods: {
receiveFunction(data) {
this.propToPass = data;
console.log("From emit: ", data);
},
},
};
</script>
About.vue
<template>
<div>
<h3>About Page</h3>
<p>
I need this data:
<span style="color: green">'ComputedData'</span> available inside
'SlotWrapper'
</p>
<p>{{ ComputedData }}</p>
</div>
</template>
<script>
export default {
name: "About",
data() {
return {
someVariable: "'someVariable'",
};
},
mounted() {
setTimeout(this.sendData, 2000);
},
computed: {
ComputedData() {
return (
this.someVariable + " How do I become accessible inside slotWrapper?"
);
},
},
methods: {
sendData() {
this.$emit("comp-data", this.ComputedData);
},
},
};
</script>