帮忙看个简单的小项目

Question

首先这个是项目要求https://pro.modao.cc/app/yYrFSrhbpUkSjrOCYpKg9iO6d2PPFGo 这个是数据const data =[  {    lv:'美国学前',    level:'L1',    theWords:['see','play', 'me','at','run','go','and','look','can','here'],    stuAnswer:''  },  {    lv:'美国学前',    level:'L2',    theWords:['you','come','not','with','jump','help','is','work','are','this'],    stuAnswer:''  },  {    lv:'美国小学1年级',    level:'L3',    theWords:['road','live','thank','when','bigger','how','always','night','spring','today'],    stuAnswer:''  }]这是我目前写的代码<template> <div class="home"> <p class="title">请点击选出自己认识的单词</p> <checker     v-for="(item, index) in items"   v-if="index == 0"   @click.native="checker(index)"   class="check-box"    v-model="demo"    type="checkbox"    default-item-class="demo1-item"    selected-item-class="demo1-item-selected"   >   <checker-item      class="check-item"     v-for="(item2, index2) in item.theWords"     :value="item2"     @click.native="selected(item2,item.lv,item.level,index)"   >{{item2}}</checker-item> </checker> <x-button    class="submit"    type="primary"    ref="submit"   @click.native="submit"   link="/homeTwo" >{{msg}}</x-button> </div></template><script> import {getHomeData} from '@/api/index'; export default { name:'HomeOne', data() { return { items:[], demo:'', msg:'都不认识' } }, props:{ value:{ type:String, default:'' } }, created() { this.getData(); }, methods:{ getData() { getHomeData().then(data => { this.items = data; }) }, selected(query,lv,level,index) { if(lv) { this.msg = '我选好了'; $('.submit').css('background-color','rgb(205, 165, 104)') }else { this.msg = '都不认识'; $('.submit').css('background-color','rgb(217, 106, 107)') } }, submit() { } } }</script><style scoped>  .home{  width:100%;  }  .title{  width:100%;  display: block;  font-weight: bold;  text-align: center;  margin:50px 0;  }  .list{  width:100%;  margin-bottom: 20px;  }  .check-box{  display: flex;  justify-content: center;  align-items:center;  align-content:space-between;  flex-wrap: wrap;  }  .check-item{  margin:0 auto;  width:34%;  margin-bottom: 40px;  }  .demo1-item {  text-align: center;  border: 1px solid #ccc;  line-height: 1;  padding: 10px 0px;  border-radius: 5px;    background-color: #eee;  }  .demo1-item-selected {  background-color: rgb(139, 195, 74);  }  .submit{  width:83%;  font-size: 16px;  background-color: rgb(217, 106, 107);  }  .submit-selected{  background-color:rgb(205, 165, 104);  }</style>下面说说我的问题1、要求只要有一个选中了下面的不认识就会变我选好了，然后我的是要点到第二个才会变，我改变的方式引用的jquery，能不能用vue的方式解决一下2、当点击选好了会把你不认识的单词显示出来，点击按钮的时候怎么获取到clected里面的那些参数以及上面循环的那些3、当认识9个以上的时候会出来下一套题， 我设置的index==0所以只出来第一套，要怎么获取到这个index以及当我点击了9个以上按了提交让index变为1出来下一套题求高手帮我看看吧，这是我的第一个项目，研究了蛮久了，我可以给个小红包感谢，QQ405708338