Vue_demo

demo

HTML

<div id="app">
  <h2>Todos:</h2>
  <div class="">
		<div class="row" v-if='seen == true'>
			<input type="text" v-model="title">
			<input class="btn_m" type="text" v-model="desc">
			<button class="btn_m" @click="addProject">Добавить</button>		
		</div>
		<div class="row" v-for="(group, index) in groups" :key="index">
			<div class="">
				<button class="btn_m btn-success" @click="projectList(index)" >
          {{ group.name }}
        </button>
					<div v-if="seen_2 == true">
						<div v-for="(object, i) in groups[index].arr" :key="i">
              {{ object.title }} - {{ object.desc }}
            </div>
					</div>
			</div>
		</div>
	</div>  
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: grey;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

.btn_m {
	margin: 2% 0; 
}

.mar_left {
	margin: 0 0 0 25%;
}

Vue

new Vue({
  el: "#app",  
  data: {
    seen: false,
    seen_2: false,		
    title: '',
    desc: '',
    index: 0,
    groups: [
      {name: 'Группа-1', arr: []},
      {name: 'Группа-2', arr: []},
      {name: 'Группа-3', arr: []}
    ]
  },  
  methods: {
    projectList(index) {
      this.seen = true;			
      this.index = index;			
    },

    addProject() {
      if(this.title !== '' && this.desc !== '') {
        var obj = {};
        obj.title = this.title;
        obj.desc = this.desc;
        this.groups[this.index].arr.push(obj);
        this.seen_2 = true;
        this.title = '';
        this.desc = '';
      }
    }
  }  
})