How to prompt a component based on category selection

Question

I am trying to prompt a component based on category selection. If i will enter a "single family homes" in category input field in step1 at that time I want to prompt a second component "promp" means while we click on next button then second component fields should display. If i enter any other category then third component should display

<template id="step1" v-if="currentStep == 1">
<input style="width: 93%;" type="text" class="vuepost_ad" placeholder="Search your category" 
name="category" @change="onChange($event)"
v-model="step1_category" maxlength="200" id="id_post_type" :rules="inputRules">
<p>this is 3rd component</p>
<button type="button" @click.prevent="stepsback(5)">Previous</button>
<button type="button" @click.prevent="goToStep(6)">Next</button>
</template>

<template id="step2" v-if="currentStep == 2">
<p>this is 4th component</p>
<button type="button" @click.prevent="stepsback(5)">Previous</button>
<button type="button" @click.prevent="goToStep(6)">Next</button>
</template>

<template id="step3" v-if="currentStep == 3">
<p>this is 5th component</p>
<button type="button" @click.prevent="stepsback(5)">Previous</button>
<button type="button" @click.prevent="goToStep(6)">Next</button>
</template>

*vue.js*
<script>
Vue.component('step1', {
template: '#step1',
props: [
'currentStep',
'step1'
]
});

Vue.component('step2', {
template: '#step2',
props: [
'currentStep',
'step2'
]
});

Vue.component('step3', {
template: '#step3',
props: [
'currentStep',
'step3'
]
});

var app = new Vue({
el: '#app',
data: {
currentStep: 1,
step1: {
},
step2: {
}
},
// By using this delimiters we were able to fix the vue.js compatibility with django. since the curly braces between django and
// vue.js conflicted, delimiters helped here to solve the conflicts
delimiters: ["<%","%>"],
ready: function() {
console.log('ready');
},
// Here we have written vue.js methods for increment and decrement of next and previous steps
methods: {
goToStep: function(step) {
this.currentStep ++;
},
stepsback: function(step) {
this.currentStep --;
},

//this is the code where I want to display a component. Here If I will select a "single family homes then if we` click next button then in next screen component three should display"

onChange(event) {
var category = event.target.value
if (category == "Real Estate | Single Family Homes"){
var a = this.step3
console.log(a)
}
},

</script>