Сделать корректное создание дубликата шаблонов

Vue.component('studysubject', {
  template: `
			<div style="border: 1px solid blue;">
				<h1>Навчальний предмет</h1>
				<div class="row ">
					<choose-student></choose-student>
					<data-tag></data-tag>
				</div>
			</div>
		`
});
Vue.component('persontask', {
  template: `
			<div style="border: 1px solid pink;">
				<h1>Індивідуальне завдання</h1>
				<addtaskstudent></addtaskstudent>
				<task></task>
				<edit-container></edit-container>
			</div>
		`
});

new Vue({
  el: "#reg",
  data: {
    component: false,
    arrRegistration: [],
    teacher: '',
    subject: '',
    group: '',
    show: false,

    btncreate: true
  },
  methods: {
    createTeacher() {
      this.arrRegistration.push(this.teacher, this.subject, this.group);
      console.log(this.arrRegistration);
      this.btncreate = false;
    },
    toggleShow() {
      this.show = !this.show;
    }

  }
});

<div id="reg">
  <div id="reg_teacher">
    <input type="text" placeholder="teacher" v-model="teacher" class="value_info">
    <input type="text" placeholder="subject" v-model="subject" class="value_info">
    <input type="text" placeholder="your group" v-model="group" class="value_info">
    <div class="choice_desk" @click="toggleShow">Choose desk!</div>
    <div v-if="show">
      <ul>
        <li @click="component='studysubject'">Навчальний предмет</li>
        <li @click="component='persontask'">Індивідуальне завдання</li>
        <li>Практика</li>
        <li>Курсовий проект</li>
      </ul>
    </div>
    <input type="button" value="Create" @click="createTeacher()" v-show="btncreate" class="createUser">
  </div>
  <div v-for="teacher in arrRegistration" style="color: red;">{{ teacher }}</div>

  <!-- DESKS -->
  <keep-alive>
    <component :is="component"></component>
  </keep-alive>


</div>