Почему компонент отображается всего на долю секунды?

Как новичок в Vue, я борюсь с проблемой, которую - даже это не должно быть слишком сложно - я не могу решить. Принцип такой:

Я хочу создать опрос, состоящий из разных тем. Пользователь должен иметь возможность выбирать между этими темами (компонент A и компонент B). Это прекрасно работает.

Но: когда я нажимаю кнопку «Показать компонент C», этот компонент отображается только на долю секунды. Почему это так, какую ошибку я сделал и как решить проблему?

Большое спасибо за твою помощь!

App.vue

<button @click = "setSelectedComponent('ComponentA')">Component A</button>
<button @click = "setSelectedComponent('ComponentB')">Component B</button>
  
  <component-b 
  v-if = "selectedComponent === 'ComponentB'"
  > </component-b>
  
  <component-a 
  v-if = "selectedComponent === 'ComponentA'"
  ></component-a>
 

  <start 
  v-if = "selectedComponent === 'form-empty'"
  ></start>

</template>


<script>
import ComponentB from './components/ComponentB.vue';
import ComponentA from './components/ComponentA.vue';
import Start from './components/Start.vue';

export default {
  components: {
    ComponentB,
    ComponentA,
    Start,
  },
  data() {
    return {
      selectedComponent: 'form-empty',
    }
  },
  methods: {
    setSelectedComponent(cmp) {
      this.selectedComponent = cmp;
    },
  
    }
  }  
</script>

Start.vue

<template>
  <form>
    <div>
      <h1>Which Component Do You Want To Select?</h1>
    </div>
  </form>
</template>

**

Компонент А

<template>
  <form>
    <h1>Component A</h1>

    <div class = "form-control">
      <input type = "range" min  = "0" max = "100" v-model=value>
    </div>

    <div>
      <button @click = "evaluateForm">Save Data</button>
    </div>
   
    <h4>Value: {{value}}</h4>
  </form>
  <component-c v-if = "varia === 'yes'"></component-c>


</template>

<script>
import ComponentC from './ComponentC.vue';
export default {
  components: {
    ComponentC
  },
  methods: {
    evaluateForm() {
      this.varia='yes'

    }


  },
  
  computed: {
    result() {
      return parseInt(this.abc) + parseInt(this.cde)

      
    }
    

  },
    data() {
        return {
            value: '',
            varia: '' 


            }
      
            }
}
</script>

Компонент B

<template>
  <form>
    <h1>Component B</h1>

    <div>
      <input type = "range" min  = "0" max = "100" v-model=value>
    </div>

    <div>
      <button @click = "evaluateForm">Save Data</button>
    </div>

    <h4>Value: {{value}}</h4>
  </form>
    <component-c v-if = "varia === 'yes'"></component-c>
</template>


<script>
import ComponentC from './ComponentC.vue';
export default {
  components: {
    ComponentC
  },
  methods: {
    evaluateForm() {
      this.varia='yes'
    }
  },
  
  computed: {
    result() {
      return parseInt(this.abc) + parseInt(this.cde) 
    }
  },
    data() {
        return {
            value: '',
            varia: ''
            }
            }
}
</script>

Компонент C

<template>
  <form>
    <div class = "form-control">
      <h1>The value is: </h1>
    </div>
  </form>
</template>