RegistrationFlow.vue

<template lang="jade">
	component(:is="currentStep", transition="switch-step", transition-mode="out-in")
	button.stepButton(@click="setCurrentStep('step1')") Step 1
	button.stepButton(@click="setCurrentStep('step2')") Step 2
</template>

<style lang="stylus">
	h1
		color: #33BA82
		background-color: #33495F
		text-align center
		width: 50%
		margin: auto

	button
		margin-top: 15px

	.switch-step-transition
		transition: all .3s ease

	.switch-step-enter
		transform: translateX(50%)
		opacity: 0

	.switch-step-leave
		transform: translateX(-50%)
		opacity: 0
</style>

<script>
	var Step1 = require('./regflow/step1.vue'),
		Step2 = require('./regflow/step2.vue');

	export default {
		data: function () {
			return {
				currentStep: 'step1'
			}
		},
		methods: {
			setCurrentStep: function(step) {
				this.currentStep = step;
			}
		},
		components: {
			step1: Step1,
			step2: Step2
		}
	}
</script>

Step1.vue

<template lang="jade">
	#step1(:stepManager="stepManager")
		h1 {{msg}}
</template>

<style lang="stylus">

</style>


<script>
	export default {
		data: function () {
			return {
				msg: 'Hello World Step 1'
			}
		},
		props: ['stepHandler']
	}
</script>

Step2.vue

<template lang="jade">
	h1 {{msg}}
</template>

<style lang="stylus">

</style>


<script>
	export default {
		data: function () {
			return {
				msg: 'Hello World Step 2'
			}
		}
	}
</script>