Сделать компонент из готового кода?

const ChooseListStudents = new Vue({
            el: '#chooseListStudents',
            data(){
                return {
                    groups:[
                        {id:1, members:['Ivanov', 'Mac', 'Orehov']},
                        {id:2, members:['Shobdra', 'Rimar', 'Haguev']},
                        {id:3, members:['Slobodinaiuk', 'Shelepko', 'Androshuk']},
                    ],
                    isShow:false,
                    listStudent:[]
            }},
            methods: {
                showGroup(i){
                    return this.groups[i].itemstudent = !this.groups[i].itemstudent;
                },
                addUser(list){
                    this.listStudent.push(list);
                },
	            deleteItem(index) {
			      this.listStudent.splice(index, 1);
			    }
            },
            created() {
                this.groups.forEach(element => {
                    this.$set(element, 'itemstudent', false)
                });
            },
        })

<div id="chooseListStudents">
    <ul v-for="(group,index) in groups" :key="group.id" v-show="isShow">
           <h3 @click="showGroup(index)"> Group - {{group.id}} </h3>
        <li v-for="list in group.members" v-show="group.itemstudent" @click="addUser(list)">
            {{list}}
        </li>
    </ul>
    <button @click="isShow=!isShow" v-show="!isShow">Add</button>
    <ul v-show="isShow">
        List students!
        <li v-for="(lastName, index) in listStudent">
            {{lastName}}
            <button @click="deleteItem(index)">Delete</button>
        </li>
    </ul>
</div>