gistfile1.txt

// parent
<template>
	<header class="content-header">
		<h1 class="h2 first">Track workout</h1>
	</header>
	<div>
		<ul class="exercises">
			<li class="exercise" v-for="exercise in exercises" track-by="$index" transition="item">
				<div class="col-sm-6 col-xs-12 selector">
					<button class="btn btn-default" v-on:click="selectExercise()">Select exercise</button>
				</div>
				<div class="col-sm-2 col-xs-4">
					<input type="tel" class="form-control" v-model="exercise.reps" placeholder="Reps">
				</div>
				<div class="col-sm-2 col-xs-5">
					<input type="tel" class="form-control" v-model="exercise.rest" placeholder="Rest">
				</div>
				<div class="col-sm-2 col-xs-3 buttons btn-group">
					<button class="btn btn-default" v-on:click="copy(exercise)"><span class="glyphicon glyphicon-copy"></span></button>
					<button class="btn btn-default" v-on:click="delete($index)"><span class="glyphicon glyphicon-remove"></span></button>
				</div>
			</li>
		</ul>
	</div>
	<div class="btn-group">
		<button v-on:click="add()" class="btn btn-primary"><span class="glyphicon glyphicon-plus"></span> Add exercise</button>
		<button class="btn btn-default" v-if="exercises.length">Save</button>
		<button class="btn btn-default" v-if="exercises.length">Mark complete</button>
	</div>

	<exercise-selector></exercise-selector>
</template>

<script>
	import ExerciseSelector from '../shared/ExerciseSelector.vue'

	export default {
		components: {
			ExerciseSelector
		},

		data() {
			return {
				exercises: []
			}
		},

		methods: {
			add: function() {
				this.exercises.push({});
			},
			copy: function(exercise) {
				this.exercises.push(exercise);
			},
			'delete': function(i) {
				this.exercises.splice(i, 1);
			},
			selectExercise: function() {
				this.$broadcast('select-exercise');
			}
		}
	};
</script>

// Child
<template>
	<div id="modal" class="wrapper" v-if="show">
		<div class="window">
			<header class="content-header">
				<h1 class="h2 first">Select exercise</h1>
			</header>
			<div class="list" :class="view">
				<ul class="muscle-groups">
					<li v-for="group in muscleGroups" v-on:click="selectGroup(group)">{ group.name }</li>
				</ul>
				<ul className="exercises">
					<li v-for="group in exercises" v-on:click="selectExercise(exercise)">{ exercise.name }</li>
				</ul>
			</div>
			<div className="footer">

			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data: {
			show: false
		},

		events: {
			'select-exercise': function() {
				this.show = true;
			}
 		}
	}
</script>