How to get data from a nested component - vue.js

Question

I have this 3 components. One is for the Question component that consists of questions. The second is for QuestionOption for the list of choices. And the third one is my main component. How do I get the data from the QuestionOption component to the main component. Since the main component is not the parent of the QuestionOption I cannot use the $emit. Also I make use of bus but it's not working on my case. Can anyone help me on this.
Also how will I get all the chosen answers after the submission of the button? Here is my code.
Main.vue
<div class="quiz-background">
<question
v-for="(question, $indexParent) in randomQuestions"
:question="question['doc'].question"
:choices="question['doc']['choices']"
:indexParent="$indexParent"
:correctAnswer="question['doc'].correctAnswer"
>
</question>
<section style="margin:16px">
<v-ons-button
modifier="cta"
#click="submit"
v-show="!isDone"
>Submit
</v-ons-button>
</section>
</div>
<script>
submit() {
bus.$on('choosed', function(answer) {
console.log(answer);
});
},
</script>
Question.vue
<template>
<v-ons-list>
<v-ons-list-header>
{{indexParent + 1}}.{{ question }}
</v-ons-list-header>
<question-option
v-for="(choice, key, $index) in choices"
:choice="choice"
:letter="key"
:indexParent="indexParent"
:index="$index"
:correctAnswer="correctAnswer"
>
</question-option>
</v-ons-list>
</template>
<script>
import QuestionOption from './QuestionOption.vue';
export default {
props: ['question', 'indexParent', 'choices', 'correctAnswer'],
components: {
QuestionOption
}
}
</script>
QuestionOption.vue
<template>
<v-ons-list modifier="inset">
<v-ons-list-item
:name="'question-' + indexParent"
:modifier="longdivider"
:key="letter"
tappable
>
<label class="left">
<v-ons-radio
:name="'question-' + indexParent"
:input-id="indexParent + '-' + index"
:value="letter"
:key="letter"
v-model="chosenAnswer"
#change="appendAnswer($event)"
>
</v-ons-radio>
</label>
<label
class="center"
:for="indexParent + '-' + index"
:class="{'success' : isSuccess, 'danger' : isDanger}"
>
{{ letter }} . {{ choice }}
</label>
</v-ons-list-item>
</v-ons-list>
</template>
<script>
import Vue from 'vue';
var bus = new Vue();
export default {
data() {
return {
chosenAnswer: ''
}
},
props: ['letter', 'choice','correctAnswer', 'indexParent', 'index'],
computed: {
isSuccess () {
return this.chosenAnswer === this.correctAnswer;
},
isDanger () {
return this.chosenAnswer !== this.correctAnswer;
}
},
methods: {
appendAnswer (event) {
var answer = event.target.value;
bus.$emit('choosed', answer);
}
}
}
</script>

Answer 1

Like the article I mentioned in the comment, you can make a js file called event-bus.js, include code below.
// event-bus.js
import Vue from 'vue';
var EventBus = new Vue();
export default EventBus;
After that, import it both in QuestionOption.vue and Main.vue like this
import bus from './event-bus';
Then try it again. The reason why your code didn't work is because you generated two Vue instances, they've got no relationship with each other, so no communication would happen.