Ionic-Vue hot reload clears out state? How to solve?

I’m trying to use Ionic-Vue to develop a mobile application. My problem is summarized by two examples. I apologize if I think including any code to illustrate the problem isn’t necessary.

Case 1: I tried making a form which contains say a Log In. I enter data to the input box and then change the submit button text value in code and save it. The page clears out the data in the form which I don’t expect.

Case 2: I tried making a counter that starts from 0 which increments with successive Count Up button presses. However, if I change the button text value of the counter button to Count Up by 1, the counter value resets back to 0 - a behavior which I don’t expect.

How to solve this?

Thanks a lot!

providing some sample code would be extremely helpful

As stated in the Vue3 docs, the value of counter should persist even if I change the button text.

This GIF comes from the docs, this is what I expect. The counter value should stay on hot-reloads even if I change other UI elements.

An alternate code I used for testing is as follows:

  <div id="app">
    <div class="counter">
      {{ counter }}
    <div class="count-up-btn">
          If I change this text to say 'Count Up by 1' 
          the counter resets again. =(
      <button @click="countUp">Count Up by 1</button>
    <div class="count-down-btn">
      <button @click="countUp">Count Down</button>

<script setup>
  import { ref } from 'vue';

  const counter = ref(0);

  function countUp() {
    counter.value += 1;

  function countDown() {
    counter.value -= 1;

  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;

Here, the value of counter is reset to 0 when I change other UI elements. I think this might affect development in the future such as when developing long forms and then I want to change label values on the fly whilst retaining the form state.

I tried using Nuxt (for web, not with Ionic) and this problem doesn’t exist.

Thanks a lot, sir!