TailwindCSS-切换边栏在md屏幕中不起作用

Question

尝试使用medium sreen在Tailwind and Vuejs上实现切换端，但是它不能按预期工作，实际上它在Large Screen中可以正常工作，但是在md screen中却不能工作。 >

My Code

<template>
    <div class="flex">
        <!-- Sidebar -->
        <aside :class="isOpen ? 'block' : 'hidden'">
            <div class="min-h-screen bg-gray-800 shadow-xs hidden md:block">
                <nav class="px-3">
                    <ul>
                        ....
                    </ul>
                </nav>
            </div>
        </aside>

        <!-- Header -->
        <div class="flex-1">
            <header class="bg-white px-5 py-2">
                    <span
                        class="text-xl block hover:border-gray-500 cursor-pointer"
                        @click.prevent="isOpen = !isOpen"
                    >
                        <i class="fa fa-bars"></i>
                    </span>
            </header>
        </div>
    </div>
</template>


    data() {
        return {
            isOpen: true,
        };
    },

任何帮助将不胜感激。谢谢...