Smooth max-height when removing

I have got a element I open using a transition so it’s smooth, I then remove the set height when it is done so that the content can define the height.

However when closing the transition doesn’t work, it’s just an abrupt close.

Vue.component('test', {
  template: `<div>
  <a href="javascript:void(0)" @click="isActive = !isActive">Expand</a>
  <div ref="content" class="content"></div>
  </div>`,
  data() {
    return {
      isActive: false
    } 
  },
  mounted() {
   const _this = this;
    this.$refs.content.addEventListener('transitionend', function() {
      console.log('end');
      _this.$refs.content.classList.add('show');
      _this.$refs.content.style.maxHeight = null;
    })
  },
  watch: {
    isActive() {
      if (!this.isActive) {
        this.$refs.content.style.maxHeight = `${300}px`;
        return;
      }
      this.$refs.content.style.maxHeight = null;
      this.$refs.content.classList.remove('show');
    }
  }
});

new Vue({}).$mount('#app');
.content {
  background: red;
  height: 500px;
  display: block;
  transition: max-height .3s ease;
  max-height: 0;
}
.content.show {
  max-height: unset;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <test></test>
</div>