jQueryのslideToggle()をVueで代替する #Vue.js

Vue標準のtransitionコンポーネントで完結できて、slideToggleぽい動きができます。

template

 <div>
   <button @click="handleToggle">
    Toggle Button
   </button>
   <transition
     name="toggle-slide"
     @before-enter="beforeEnter"
     @enter="enter"
     @before-leave="beforeLeave"
     @leave="leave"
   >
     <div v-show="isActive">
       slide content
     </div>
   </transition>
 </div>

script

 export default {
   data() {
    return {
      isActive: false   
    }
   },
   methods: {
    handleToggle() {
        this.isActive = !this.isActive
    },
    // transition hook
    beforeEnter(el) {
        el.style.height = '0'
    },
    enter(el) {
        el.style.height = el.scrollHeight + 'px'
    },
    beforeLeave(el) {
        el.style.height = el.scrollHeight + 'px'
    },
    leave(el) {
        el.style.height = '0'
    }
   }
 }

style

 .toggle-slide-enter-active,
 .toggle-slide-leave-active {
    transition: all 0.5s;
    overflow: hidden;
 }
 .toggle-slide-enter,
 .toggle-slide-leave-to {
    height: 0;
    transition: all 0.5s;
 }

slot使ってみたり、親でv-forさせたり再利用できそうですね
またwai-ariaを使いstate管理してアクセシブルなアコーディオンパネルにするとなお良いですね
自己流でいつもやっているwai-aria含めたコードはこんな感じです。
https://codesandbox.io/embed/v-a11y-accordion-6jyky

レガシー環境からの移行の参考になれば・・・