slideToggle() Vue.js responsive

Many people who migrate from jQuery to Vue.js trying to find solution for slideUp or slideDown method... And some people try to write a script for height animation, but its wrong method cuz causing coding difficulties in responsive.

Each js language has a simpler method:

<template lang="pug">
    .spoiler(:class="{'spoil-active': active}")
        button.spoiler-button(@click="active = !active") {{ title }}
        
        transition(name="accordion-item" @enter="startTransition" @after-enter="endTransition" @before-leave="startTransition" @after-leave="endTransition")
            .accordion-item-details(v-if="active")
                .spoiler-block-padding
                    slot
</template>

<script>
export default {
    name: "spoiler",
    data() {
        return {
            active: false
        }
    },
    props: {
        title: {
            type: String,
            default: 'Open spoiler'
        }
    },
    methods: {
        startTransition(el) {
            el.style.height = el.scrollHeight + 'px'
        },
        endTransition(el) {
            el.style.height = ''
        }
    }
}
</script>


If you look in detail at the code, you will see that for the slideToggle method, we use the scroll-height animation that we erase after it ends.

And CSS:

.accordion-item-enter-active, .accordion-item-leave-active {
    will-change: height;
    transition: height 0.2s ease;
}

.accordion-item-enter, .accordion-item-leave-to {
    height: 0 !important;
}