VueJS transition effect on model change

Hi all, I'm kind of new to Vue.js & was trying to add transition effect for when my model changed. But I can't seem to get it to work. My best result so far is below: http://codepen.io/jhkueh/pen/obZGWg

What I wanted to do is fade-out the old quote and fade-in the new quote whenever user click on the refresh button. But for my current attempt, the new quote didn't fade-in but fade-out instead.

[Edit: added code] HTML

<div class="header">
  <div class="container">
    <div class="row ">
      <div class="col-lg-12">
        <h1 class="cover-heading">Random Quote Machine</h1>
        <div class="panel panel-default col-md-8 col-md-offset-2" id="app">
          <div class="panel-body">
            <p class="content" v-show="showed" transition="fadeOut">{{ quote }}</p>
            <i @click="newQuote" title="Click for new quote" class="fa fa-refresh"></i><a href="https://twitter.com/intent/tweet?text={{quote}}" target="_blank" title="Tweet this!"><i class="fa fa-twitter"></i></a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

App.js

var app = new Vue({
  el: '#app',
  data: {
    showed: true,
    quote: '',
    quotes: ["Don't complain about the snow on your neighbour's roof when your own doorstep is unclean. — Confucious",
      "A great man shows his greatness by the way he treats little men. ― Thomas Carlyle",
      "I can't imagine a man really enjoying a book and reading it only once. ― C.S. Lewis",
      "If I find in myself a desire which no experience in this world can satisfy, the most probable explanation is that I was made for another world. ― C.S. Lewis",
      "They that be whole need not a physician, but they that are sick.",
      "Every kingdom divided against itself is brought to desolation, and every city or house divided against itself shall not stand.",
      "The journey of a thousand miles begins with a single step. ― Laozi",
      "Give a man a fish and you feed him for a day. Teach him how to fish and you feed him for a lifetime.",
      "No! Try not. Do... or do not. There is no try. ― Yoda",
      "A neutron walks into a bar and asks how much for a drink. The barman replies for you no charge. ― Sheldon Cooper",
      "Sheldon: 'Well, this is confusing for me. But I don't want to stand in the way of your happiness. So, I will condemn you internally while maintaining an outward appearance of acceptance.'",
      "My fists are not up here because I am milking a giant invisible cow. ― Sheldon Cooper",
      "Almost every successful person begins with two beliefs...the future can be better than the present, and I have the power to make it so. ― Zig Ziglar",
      "Remember that failure is an event, not a person. ― Zig Ziglar",
      "The more you complain about your problems, the more problems you will have to complain about. ― Zig Ziglar",
      "Far too many people have no idea what they can do because all they've been told is what they can't do. ― Zig Ziglar",
      "The master has failed more times than the beginner has even tried. ― Zig Ziglar",
      "Your character should always be stronger than your circumstances. ― Zig Ziglar",
      "All our dreams can come true if we have the courage to pursue them. ― Walt Disney"
    ]
  },
  ready: function() {
    this.newQuote();
  },
  methods: {
    newQuote: function() {
      var random_no = Math.floor(Math.random() * this.quotes.length);
      this.quote = this.quotes[random_no];
      this.showed = !this.showed;
    }
  }
})

CSS

body,
html {
  width: 100%;
  height: 100%;
  font-family: 'Source Sans Pro', sans-serif;
}

i {
  color: rgba(45, 45, 45, 0.45);
  font-size: 20px !important;
  margin: 0 1rem;
}

i:hover,
i:focus {
  color: #662E1C;
}

h1,
h2 {
  font-family: Bitter, sans-serif;
}

.header {
  background: linear-gradient(135deg, #DB9501 15%, #C05805 50%, #2E2300 100%);
  color: #662E1C;
  height: 100%;
  text-align: center;
  padding-top: 15vh;
}

.header h1 {
  font-size: 46px;
  margin-bottom: 2.6rem;
  text-shadow: 1px 1px 5px rgba(125, 125, 125, 0.1),
               2px 2px 5px rgba(125, 125, 125, 0.1),
               3px 3px 5px rgba(125, 125, 125, 0.1),
               4px 4px 5px rgba(125, 125, 125, 0.1),
               5px 5px 5px rgba(125, 125, 125, 0.1);
}

.header p {
  color: #662E1C;
  font-size: 26px;
  margin: 2.6rem 0;
}

.panel {
  background: rgba(220, 220, 220, 0.15);
  border-radius: 0;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .2),
              0 1px 1px 0 rgba(0, 0, 0, .14),
              0 2px 1px -1px rgba(0, 0, 0, .12);
}

.panel-default {
  border-color: rgba(221, 221, 221, 0.1);
}

/// CSS transition
.fadeOut-transition {
  visibility: visible;
  opacity: 1;
}

.fadeOut-enter,
.fadeOut-leave {
  opacity: 0;
}

p.content {
  transition: all 2.5s ease;
}