hoooks перехода вызывается только тогда, когда элемент перехода является корневым элементом в компоненте

Я заметил, что переходные переходы запускаются только тогда, когда элемент <transition> является корневым элементом в моем шаблоне компонента. Это по дизайну? Я что-то пропустил?

в моем App.vue меня есть этот шаблон:

<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
<example v-if = "checked"></example>

Мой компонент example.vue:

<template lang="html">

  <section class="example">
     <transition
        v-on:enter = "enter"
        v-on:leave = "leave">
        <div class = "transition-example"></div>
    </transition>
  </section>

</template>

<script lang="js">
  export default  {
    name: 'example',
    props: [],
    mounted() {

    },
    data() {
      return {

      }
    },
    methods: {
      enter: function (el, done) {
        console.log("enter")
        done()
      },
      leave: function(el, done) {
        console.log("leave")
        done()
      }
    }
}
</script>

<style scoped >

</style>

В этом текущем exmaple крюки enter и leave никогда не выполняются при переключении флажка.

Если бы я обновил шаблон example.vue чтобы убедиться, что элемент <transitions> является корневым элементом (как показано ниже) вызываются вызовы enter и leave.

<template lang="html">

  <transition
    v-on:enter = "enter"
    v-on:leave = "leave">
    <div class = "transition-example"></div>
  </transition>


</template>

Я хотел бы иметь большую гибкость в том, где я помещаю свой элемент <transition> или имею несколько элементов transition в компоненте, все из которых имеют свои собственные крючки.

Я предполагаю, что я пропускаю то, что мешает мне это делать.