When I’m switching visibility(v-if) of the same components with different content, components doesnt destroy and mount.

I need to detect this switch in parent or in child

    <select v-model="hiddenChild">
      <option :value="null">all visible</option>
      <option :value="1">1</option>
      <option :value="2">2</option>
      <option :value="3">3</option>
    </select>

    <child v-if="hiddenChild !== 1">foo</child>
    <child2 v-if="hiddenChild !== 2">bar</child2>
    <child v-if="hiddenChild !== 3">baz</child>

child.vue

  mounted() {
    console.log("component mounted", this._uid);
  },
  beforeDestroy() {
    console.log("component destroyed", this._uid);
  },

if you switch between 1 and 3 elements, a notification about mounted and destroyed will not be displayed in the console

example: codesandbox

if you add keys to these components, everything will work correctly, but I don’t want to add keys every time I use the component

    <select v-model="hiddenChild">
      <option :value="null">all visible</option>
      <option :value="1">1</option>
      <option :value="2">2</option>
      <option :value="3">3</option>
    </select>

    <parent>
      <child key="1" v-if="hiddenChild !== 1">foo</child>
      <child2 key="2" v-if="hiddenChild !== 2">bar</child2>
      <child key="3" v-if="hiddenChild !== 3">baz</child>
    </parent>