title: How to trigger a transition event on an element inside a component?
body: <p>In a vue js app, how to trigger a transition event on an element inside a component, when this component leaves?</p>
  
  <p>The element has a <code>v-if="showElement"</code>, then <code>showElement</code> is set to false when the component transition fires on <code>leave</code>… but <code>showElement</code> is not changing in the view.  </p>
  
  <p>Here is a codepen: <a href="https://codepen.io/francoisromain-1472161924/pen/RGPYOb?editors=1111" rel="nofollow">https://codepen.io/francoisromain-1472161924/pen/RGPYOb?editors=1111</a></p>
  
  <p>and the code: </p>
  
  <p>html:</p>
  
  <pre><code>&lt;div id="app"&gt;
      &lt;a @click="show = !show"&gt;Show {{ show }}&lt;/a&gt;
      &lt;page-component v-if="show"&gt;&lt;/page-component&gt;
  &lt;/div&gt;
  
  &lt;script id="pageComponent" type="x-template"&gt;
      &lt;div class="component" transition="component"&gt;
          &lt;p&gt;Component&lt;/p&gt;
          &lt;div v-if="showElement" class="element" transition="element"&gt;
              &lt;p&gt;Element&lt;/b&gt;
           &lt;/div&gt;
    &lt;/div&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>js:</p>
  
  <pre><code>var pageComponent = Vue.extend({
      template: '#pageComponent',
      data() {
          return {
              showElement: false
          };
      },
      ready() {
          this.showElement = true;
      },
      beforeDestroy() {
          this.showElement = false;
      },
      transitions: {
          'component': {
              enter(el) {
              },
              leave(el) {
                  this.showElement = false;
              }
          },
          'element': {
              enter(el) {
              },
              leave(el) {
              }
          }
      }
  });
  
  new Vue({
      el: '#app',
      components: {
          pageComponent
      },
      data: {
          show: true
      }
  });
  </code></pre>