How to toggle nested checkboxes (options) on check parent checkbox in Vue Js - vue.js

Question

i have simple questions list. It has some options and those options has some nested suboptions.
So need to keep hidden all nested checkboxes until checks parent checkbox.
i tried to do it but could not get it work.
i have tried this so far:
For better understanding please have a look at this fiddle
<div id="app">
<h2>Questions:</h2>
<ul>
<li v-for="question in questions">
<div class="question">{{ question.question }}</div>
<div class="label__wrap" v-for="option in question.options">
<label>
<input type="checkbox" v-model="question.answer" :value="option.option">
<span>
{{ option.option }}
</span>
</label>
<div class="sub__label__wrap" v-for="opt in option.subOptions">
<label>
<input type="checkbox" v-model="option.subOptsAnswers" :value=" opt.option">
<span>
{{ opt.option }}
</span>
</label>
</div>
</div>
<br><br>
</li>
</ul>
</div>
Thanks.

Answer 1

Updated Fiddle : https://jsfiddle.net/rcam67b9/
check the answers array whether the selected answer exist
v-if="question.answer.indexOf(option.option) !== -1"
Final Code
<div id="app">
<h2>Questions:</h2>
<ul>
<li v-for="question in questions">
<div class="question">{{ question.question }}</div>
<div class="label__wrap" v-for="option in question.options">
<label>
<input type="checkbox" v-model="question.answer" :value="option.option">
<span>
{{ option.option }}
</span>
</label>
<div class="sub__label__wrap" v-for="opt in option.subOptions" v-if="question.answer.indexOf(option.option) !== -1">
<label>
<input type="checkbox" v-model="option.subOptsAnswers" :value=" opt.option">
<span>
{{ opt.option }}
</span>
</label>
</div>
</div>
<br><br>
</li>
</ul>
</div>