title: Vue.js transition on data change
body: <p>In Vue documentation there is only example how to show or hide element but what if you want to show some transition based on value change.
  For example if new value is higher then old then show an arrow up for 3 seconds and if value is lower than old one show arrow down for 3 seconds.
  How can I achieve that?</p>
  
  <p>Here is the jsfiddle:
  <a href="http://jsfiddle.net/d2hs7muq/2/" rel="noreferrer">http://jsfiddle.net/d2hs7muq/2/</a></p>
  
  <pre><code>var data = {
      number: 1
  }
  
  Vue.component('odd',
  {
      props: ['number', 'oldNumber'],
      template: `&lt;div&gt;{{number}} 
          &lt;transition name="change"&gt;
          &lt;div v-if="oldNumber &amp;&amp; number &gt; oldNumber"class="up"&gt;up&lt;/div&gt;
          &lt;div v-if="oldNumber &amp;&amp; number &lt; oldNumber" class="down"&gt;down&lt;/div&gt;
          &lt;/transition&gt;
      &lt;/div&gt;`,
      watch:
      {
          number: function(number, oldNumber)
          {
              var me = this;
              me.oldNumber = oldNumber;
          }
      }
  });
  
  var demo = new Vue({
      el: '#demo',
      data: data
  })
  </code></pre>
  
  <p>As you can see css .change-enter-active gets triggered only on first change
  after that element stays in and no change is triggered at all</p>