Question from the Vue.js test

What this component will generate in the DOM ?

<template>
  <div>
    <h1 v-if="isTitleShown">
      Rendering DOM Vuejs
    </h1>
    <button>
      <template v-if="isButtonActivated">
        Activé
      </template>
      <template v-else>
        Désactivé
      </template>
    </button>
    <p v-show="isNoticeDisplayed">
      User doesn't see directly the DOM
    </p>
  </div>
</template>
<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    return {
      isTitleShown: ref(true),
      isButtonActivated: ref(false),
      isNoticeDisplayed: ref(false)
    };
  }
});
</script>

<div>
  <h1> Rendering DOM Vuejs </h1>
  <button> Deactivate</button>
  <p style="display: none"> User doesn't see directly the DOM </p>
</div>

<div>
  <h1> Rendering DOM Vuejs </h1>
  <button> Deactivate </button>
</div>

<div>
  <h1> Rendering DOM Vuejs </h1>
  <button>
    <template> Deactivate </template>
  </button>
</div>

<div>
  <h1 v-if="true"> Rendering DOM Vuejs </h1>
  <button> 
    <template v-if="false"> Activated </template>
    <template v-else> Deactivate </template>
  </button>
  <p v-show="false"> User doesn't see directly the DOM </p>
</div>