how to reuse a first template inside a second div - vue.js

Question

Here I have written two steps one is "step===1" and other one is "step===2". So here i wants to reuse step1 template to step2. That means we have step one template and at step1 we click on next button so at next step i want to show the same template like reusing..
<div v-if="step === 1">
<h1>Step One</h1>
<h4>Address</h4>
<label>Address</label>
<input type="text" v-model="address">
<label>City</label>
<input type="text" v-model="city">
<label>State</label>
<input type="text" v-model="state">
<button #click.prevent="next()">Next</button>
</div>
<div v-if="step === 2">
reuse step===1 template here
</div>
vue.js
export default {
data() {
return {
address: null,
city: null,
state: null
}
},
methods:{
prev() {
this.step--;
},
next() {
this.step++;
},
}
</script>

Answer 1

new Vue({
el: '#app',
data() {
return {
stepTotal: 2,
step: 1,
address: null,
city: null,
state: null
}
},
methods: {
prev() {
this.step--;
},
next() {
this.step++;
},
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<template v-for="index of stepTotal">
<div v-if="step === index" :key="index">
<h1>Step {{index}}</h1>
<h4>Address</h4>
<label>Address</label>
<input type="text" v-model="address">
<label>City</label>
<input type="text" v-model="city">
<label>State</label>
<input type="text" v-model="state">
<br>
<button v-if="index != 1" #click.prevent="prev()">Prev</button>
<button v-if="index != stepTotal" #click.prevent="next()">Next</button>
</div>
</template>
</div>

Answer 2

I'd probably separate the form for each step into its own component. So for instance:
AddressForm.vue
<template>
<div>
<label>Address</label>
<input type="text" v-model="localValue.address" />
<label>City</label>
<input type="text" v-model="localValue.city" />
<label>State</label>
<input type="text" v-model="localValue.state" />
</div>
</template>
<script>
export default {
props: {
value: Object,
},
computed: {
localValue: {
get() { return this.value; },
set(value) { this.$emit("input", value); },
},
},
};
</script>
And then just reuse this component for each step:
<div v-if="step === 1">
<h1>Step One</h1>
<h4>Address</h4>
<AddressForm v-model="step1address />
<button #click.prevent="next()">Next</button>
</div>
<div v-if="step === 2">
<h1>Step Two</h1>
<h4>Address 2</h4>
<AddressForm v-model="step2address />
<button #click.prevent="next()">Next</button>
</div>
Here's a running sample of the above:
https://codesandbox.io/s/tender-antonelli-2n4vb