Vue does not update the UI with a v-if is false

Vue version

3.5.10

Link to minimal reproduction

https://github.com/Gabrieltrinidad0101/vue-issue

Steps to reproduce

Father component

<script>
import CustomButton1 from './CustomButton.vue';

export default {
  data() {
    return {
      showChild: true,
      message: 'Waiting for event...',
    };
  },
  methods: {
    handleEvent(payload) {
      this.message = payload;
    },
    toggleChild() {
      this.showChild = !this.showChild;
    },
  },
components: {
    CustomButton1,
  },
};
</script>
<template>
    <div>
      <CustomButton1 v-if="showChild" @childEvent="handleEvent" />
      <button @click="toggleChild">Toggle Child</button>
      <p>{{ message }}</p>
    </div>
  </template>

child component

  
 <template>
    <div>
      <p>Child Component</p>
    </div>
  </template>
  
  <script>
  export default {
    mounted() {
      setTimeout(() => {
        this.$emit('childEvent', 'Event emitted after 3 seconds');
      }, 3000);
    },
  };
  </script>

What is expected?

The message changes to "Event emitted after 3 seconds."

What is actually happening?

the function runs but the UI doesn't change

System Info

System:
    OS: Linux 6.8 Ubuntu 22.04.4 LTS 22.04.4 LTS (Jammy Jellyfish)
    CPU: (4) x64 Intel(R) N100
    Memory: 6.25 GB / 15.35 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 20.11.0 - ~/.nvm/versions/node/v20.11.0/bin/node
    Yarn: 1.22.21 - ~/.nvm/versions/node/v20.11.0/bin/yarn
    npm: 10.2.4 - ~/.nvm/versions/node/v20.11.0/bin/npm
  Browsers:
    Chrome: 130.0.6723.58
  npmPackages:
    vue: ^3.4.21 => 3.4.27

Any additional comments?

In Vue, if a button is executing something and during the execution it gets hidden using v-if, what happens when a child component is emitting an event inside a setTimeout? Will the emit still be executed, and will it affect the UI

[lejunyang]

v-if will unmont the Child if value is falsy, and if a component is unmounting, emit will not work

I was reading the docs and found this
v-if vs. v-show
​

v-if is "real" conditional rendering because it ensures that event listeners and child components inside the conditional block are properly destroyed and re-created during toggles.