Why is the Vue component not re-rendering?

Question

Vue.js

There is a component, relatively speaking, StepComponent, which is responsible for the page `/steps`

<template>
    <div>
      <b-row v-show="currentStep === 1">
      </b-row>
      <b-row v-show="currentStep === 2">
      </b-row>
    </div>
</template>

And there is a SearchComponent that is embedded in the header and visible on all pages.

<template>
    <div v-bind:class="{ active: searchOpen }">
        <input type="text" v-model="code" />
        <button v-on:click="openStep">
        </button>
    </div>
</template>

When I entered data in this search, I need to open the `/steps` page at the step that was specified in the search.

<script>
export default {
  data() {
    return {
      code: ""
    };
  },
  methods: {
    openScan() {
        // обновляем свойство принудительно, чтобы обновить <router-view>
       // https://laracasts.com/discuss/channels/vue/vue-2-reload-component-when-same-route-is-requested
        this.$router.forceReloadKey = new Date().getTime();
        this.$router.push({ path: "/steps", params: { currentStep: 2 } });
    }
  }
};
</script>

app.vue

<template>
  <div id="app">
    <component :is="layout">
        <transition name="fade" mode="out-in">
            <router-view :key="$route.forceReloadKey"></router-view>
        </transition>
    </component>
  </div>
</template>

In fact, the child components are not updated - the created, mounted events are not called again, moreover, even observing the router property directly did not help.

export default {
  components: { },
  data() {
    return {
      currentStep: 1
    };
  },
  mounted() {
    // срабатывает только раз
    console.log("mounted");
  },
  created() {
    // срабатывает только раз
    console.log("created");
  },
  methods: {}
  watch: {
    "this.$router.forceReloadKey"() {
      // не срабатывает при обновлении forceReloadKey из другого компонента
      console.log("forceReloadKey");
    }
  }
};

Answer 1

you should use instead of , as v-show only toggles display: block/none, while v-if re-renders the component, calling the lifecycle hooks v-ifv-show

Answer 2

Maybe it will be useful to someone. In fact, to update one component from another (in my case, a neighboring one)
, you only need to send a message in one component to another - accept it

mounted() {
    this.$root.$on("newEvent", code => {
    });
  }