title: trying to use vue CSS Transitions
body: <p><a href="https://v2.vuejs.org/v2/guide/transitions.html" rel="nofollow noreferrer">https://v2.vuejs.org/v2/guide/transitions.html</a></p>
  <p>the doc has been poorly written here. I don't know at what stage it says to install something extra but from what I read there is nothing extra to install.</p>
  <p>&quot;Just place a <code>&lt;transition&gt;</code> tag in your vue, you'll see, it'll work&quot; says the doc :
  <a href="https://i.stack.imgur.com/oFpzD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oFpzD.png" alt="enter image description here" /></a></p>
  <p>the button does nothing on click.</p>
  <p>what could I be missing?</p>
  <p><a href="https://v2.vuejs.org/v2/guide/transitions.html" rel="nofollow noreferrer">https://v2.vuejs.org/v2/guide/transitions.html</a></p>
  <p>try it you can literally copy-paste their code (all three parts) it doesn't work.</p>
  <p>UPDATE:</p>
  <p>So I as told by I craig_h I indeed don't have my data's showing up.</p>
  <p>here's my code :</p>
  <pre><code>import Vue from 'vue'
  import App from './App'
  import BootstrapVue from 'bootstrap-vue'
  import router from './router'
  import Header from './components/header/Header.vue'
  import LateralMenu from './components/lateralmenu/LateralMenu.vue'
  import Example from './components/example.vue'
  
  Vue.config.productionTip = false
  Vue.component('Header', Header)
  Vue.component('LateralMenu', LateralMenu)
  Vue.component('Example', Example)
  Vue.use(BootstrapVue)
  
  /* eslint-disable no-new */
  new Vue({
    el: '#app',
    router,
    template: '&lt;App/&gt;',
    components: { App }
  })
  new Vue({
    el: '#nav',
    template: '&lt;Header/&gt;'
  })
  new Vue({
    el: '#lateral-menu',
    template: '&lt;LateralMenu/&gt;',
    data: {
      reveal: true,
      show: true
    }
  })
  new Vue({
    el: '#example-1',
    template: '&lt;Example/&gt;',
    data: {
      show: true
    }
  })
  </code></pre>