VueJS эквивалент jQuery slideDown/slideUp или slideToggle

Для этого можно установить модули или написать пользовательский компонент. Я предлагаю второй вариант.

<template>

    <div>

        <button @click="isShowing">
            hamburger svg here
        </button>

        <!-- animation of appearance/disappearance.
        More info: https://vuejs.org/v2/guide/transitions.html -->
        <!-- The attribute "name" is used to create custom classes
         that are applied during animation -->
        <transition name="main-nav"
                    @enter="transitionStep1"
                    @after-enter="transitionStep2"
                    @before-leave="transitionStep3"
                    @after-leave="transitionStep4">

            <div class="main-nav" v-show="!active">
                <div class="classes here">Some text</div>
            </div>

        </transition>

    </div>

</template>

<script>

    export default {
        name: "Accordion",
        data() {
            return {
                // set the variable that will hide/show the block
                active: false
            }
        },
        methods: {
            isShowing() {
                // change the value of the variable that will hide/show the block
                this.active = !this.active;
            },
            transitionStep1(el) {
                // set the block height at the moment of its appearance
                el.style.height = el.scrollHeight + 'px'
            },

            transitionStep2(el) {
                // remove inline styles from the block after animation of its appearance
                el.style.height = ''
            },

            transitionStep3(el) {
                // set the height of the block at the beginning of its disappearance animation
                el.style.height = el.scrollHeight + 'px'
            },

            transitionStep4(el) {
                // remove inline styles from the block after the animation of its disappearance
                el.style.height = ''
            },
        },
    }
</script>

<style lang="scss" scoped>

    .main-nav {
        overflow: hidden;
        -webkit-transition: height 0.3s ease;
        transition: height 0.3s ease;
    }
    .main-nav-enter {
        height: 0;
    }
    .main-nav-leave-to {
        height: 0 !important;
    }

</style>