Components listen to data in parent - vue.js

Question

See https://jsfiddle.net/d017am59/1/
I have a checkbox controling whether box elements should show text in black.
<div id="app">
<label><input type='checkbox' v-model='showBlack' />Show black</label>
<box>Hello</box>
<box>World</box>
<box>Hi</box>
<box>Bye</box>
</div>
Vue.component('box', {
template: `
<div v-bind:style='styleObject'>
{{text}}
<slot></slot>
</div>`,
data: function() {
return {
text: vueApp.showBlack?'black text: ':'white text: ',
styleObject:{
color: vueApp.showBlack?'black':'white',
'background-color':vueApp.showBlack?'white':'black',
}
}
}
});
const vueApp= new Vue({
el: '#app',
data: {
showBlack: true,
},
});
box is a complicated component, but I only present the relavent props here. For illustration, if the checkbox is checked, the color is black, the background is white; if the checkbox is unchecked, the color and the background color is reversed.
My code doesn't work because Vue throws an error "Cannot access 'vueApp' before initialization."
How do my box elements listen to the checkbox?
I don't like using a global mixin so much because a global mixin is going to inject to all components, where I only want to inject to box.
I don't like adding a prop to box, and pass showBlack to the prop of all box instances. My business requirement is ALL boxes must obey the checkbox, and it is cumbersome and error-prone if I have to write:
<box v-bind:showBlack="showBlack">Hello</box>
<box v-bind:showBlack="showBlack">Wolrd</box>
<box v-bind:showBlack="showBlack">Hi</box>
<box v-bind:showBlack="showBlack">Bye</box>
I'm fine to use Vue 2 or 3.

Answer 1

A quick solution is to use this.$root to access the data of the root instance (the one that instantiates Vue). Also, note the bindings in <box> should be to computed props so that they're reactive to changes in the root's showBlack:
Vue.component('box', {
template: `
<div v-bind:style='styleObject'>
{{ text }}
<slot></slot>
</div>`,
computed: {
text() {
return this.$root.showBlack ? 'black text: ' : 'white text: '
},
styleObject() {
return {
color: this.$root.showBlack ? 'black' : 'white',
'background-color': this.$root.showBlack ? 'white' : 'black',
}
}
}
})
demo

Answer 2

HTML:
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<div><label><input type='checkbox' v-model='showBlack' />Show black</label></div>
<box :black="showBlack">Hello</box>
</div>
JS:
Vue.component('box', {
template: `
<div v-bind:style='styleObject'>
<slot></slot>
</div>
`,
props: ['black'],
data: function() {
return {}
},
computed: {
styleObject() {
return {
color: this.black ? 'black' : 'white',
'background-color': this.black ? 'white' : 'black',
}
}
}
});
const vueApp= new Vue({
el: '#app',
data: {
showBlack: true,
},
});