Understanding how routes and components work in Ionic (component re created instead of reused)

you dont need to do router replace if you are just trying to change the component from A, B, and C.

vue is reactive so when you change a reactive variable, it will re-render the vue.

<template>
  <ComponentA v-if="inCompA" />
  <ComponentB v-if="inCompB" />
  <ComponentC v-if="inCompC" />

  <button @click="selectMessageType('A')">A</button>
  <button @click="selectMessageType('B')">B</button>
  <button @click="selectMessageType('C')">C</button>
</template>

<script>
import ComponentA from './components/ComponentA.vue';
import ComponentB from './components/ComponentB.vue';
import ComponentC from './components/ComponentC.vue';
export default {
  components: {
    ComponentA,
    ComponentB,
    ComponentC,
  },
  props: ['userId', 'messageId'],
  data() {
    return { messageType: 'A' };
  },
  methods: {
    selectMessageType(_value) {
      this.messageType = _value;
      // this.$router.replace({
      //   name: 'message',
      //   params: { userId: this.userId, messageType },
      // });
    },
  },
  computed: {
    inCompA() {
      return this.messageType === 'A';
    },
    inCompB() {
      return this.messageType === 'B';
    },
    inCompC() {
      return this.messageType === 'C';
    },
  },
};
</script>