Vue.js clearing data after if is evaluated - ruby-on-rails

Question

I am making a multi-step form in Rails 5 with Vue.js. I noticed that when a v-if is re-evaluated, the text in the input field gets cleared out. Is there a way to persist the info through the form steps and through other v-if evaluations?
Here's what my form looks like:
<fieldset class="listing-step" v-if="activeStep === 0">
<h2>Basics</h2>
<input type='button' value="Next" name='next' #click="activeStep++" :disabled="activeStep === stepList.length - 1" class="btn btn-secondary" />
<div class="row">
<div class="col">
<div class="form-group">
<strong><%= f.label :name %></strong><br>
<%= f.text_field :name, class: 'form-control' %>
</div>
</div>
</div>
</fieldset>
<fieldset class="listing-step" v-if="activeStep === 1">
<h2>Location</h2>
<input type='button' value="Previous" name='prev' #click="activeStep--" :disabled="activeStep === 0" class="btn btn-secondary" />
<input type='button' value="Next" name='next' #click="activeStep++" :disabled="activeStep === stepList.length - 1" class="btn btn-secondary" />
<div class="row">
<div class="col">
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="map_search" id="map_search_address" value="address" v-on:click="by_address = true" checked>
Set by address
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="map_search" id="map_search_coords" value="coords" v-on:click="by_address = false">
Set by coordinates
</label>
</div>
</div>
</div>
<div id="listing-location">
<transition name="fade">
<fieldset id="listing-location-child" name="address" v-if="by_address">
<div class="row">
<div class="col">
<div class="form-group">
<strong><%= f.label :city %></strong><br>
<%= f.text_field :city, class: 'form-control', 'v-bind:readonly': '!by_address' %>
</div>
</div>
<div class="col">
<div class="form-group">
<strong><%= f.label :state %></strong><br>
<%= f.text_field :state, class: 'form-control', 'v-bind:readonly': '!by_address' %>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="form-group">
<strong><%= f.label :address %></strong><br>
<%= f.text_field :address, class: 'form-control', 'v-bind:readonly': '!by_address' %>
</div>
</div>
</div>
</fieldset>
</transition>
<transition name="fade">
<fieldset id="listing-location-child" name="coords" v-if="!by_address">
<div class="row">
<div class="col">
<div class="form-group">
<strong><%= f.label :lat, 'Latitude' %></strong><br>
<%= f.number_field :lat, in: -90.0..90.0, step: :any, class: 'form-control', 'v-bind:readonly': 'by_address' %>
</div>
</div>
<div class="col">
<div class="form-group">
<strong><%= f.label :lng, 'Longitude' %></strong><br>
<%= f.number_field :lng, in: -180.0..180.0, step: :any, class: 'form-control', 'v-bind:readonly': 'by_address' %>
</div>
</div>
</div>
</fieldset>
</transition>
</div>
</fieldset>
<fieldset class="listing-step" v-if="activeStep === 2">
<h2>Amenities</h2>
<input type='button' value="Previous" name='prev' #click="activeStep--" :disabled="activeStep === 0" class="btn btn-secondary" />
<input type='button' value="Next" name='next' #click="activeStep++" :disabled="activeStep === stepList.length - 1" class="btn btn-secondary" />
<div class="row">
<div class="col">
<div class="form-group">
<strong>Amenities</strong><br>
...
</div>
</div>
</div>
</fieldset>
<fieldset class="listing-step" v-if="activeStep === 3">
<h2>Images</h2>
<input type='button' value="Previous" name='prev' #click="activeStep--" :disabled="activeStep === 0" class="btn btn-secondary" />
<div class="row">
<div class="col">
<div class="form-group">
<strong>Images</strong><br>
...
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="actions">
<%= f.submit class: 'btn btn-success' %>
</div>
</div>
</div>
</fieldset>
and my Vue initialization:
const progress = new Vue({
el: '#vue-listing',
data: {
activeStep: 0,
by_address: true,
stepList: [
{id: 0, text: 'Basics'},
{id: 1, text: 'Location'},
{id: 2, text: 'Amenities'},
{id: 3, text: 'Images'}
]
}
})
Thanks in advance!

Answer 1

change v-if to v-show OR preserve the input value in Data() and add v-model directive to every input field. So when the v-ifed control gets rendered again the v-model value will change its html value

Answer 2

You need to change v-if to v-show.
v-if is “real” conditional rendering because it ensures that event
listeners and child components inside the conditional block are
properly destroyed and re-created during toggles.
v-if is also lazy: if the condition is false on initial render, it
will not do anything - the conditional block won’t be rendered until
the condition becomes true for the first time.
In comparison, v-show is much simpler - the element is always rendered
regardless of initial condition, with just simple CSS-based toggling.
Generally speaking, v-if has higher toggle costs while v-show has
higher initial render costs. So prefer v-show if you need to toggle
something very often, and prefer v-if if the condition is unlikely to
change at runtime.
Reference