RegistrationFlow.vue

<template lang="jade">
	component(
		:is="stepHandler.currentStep"
		transition="switch-step"
		transition-mode="out-in"
		:stepHandler="stepHandler"
	)
</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 {
				stepHandler: {
					currentStep: 'step1',
					setCurrentStep: function(step) {
						this.currentStep = step;
					}
				}
			}
		},
		components: {
			step1: Step1,
			step2: Step2
		}
	}
</script>

Step1.vue

<template lang="jade">
	#step1(:stepHandler="stepHandler")
		h1 {{msg}}
		button(@click='al') text
</template>

<style lang="stylus">

</style>


<script>
	export default {
		props: ['stepHandler'],
		data: function () {
			return {
				msg: 'Hello World Step 1'
			}
		},
		methods: {
			al: function(){
				console.log(this.stepHandler??)
			}
		}
	}
</script>