我正在使用vue制作一个菜单，当点击标题时可以显示和隐藏描述。
原来的菜单是这样显示标题的

展开菜单如下所示，展开菜单描述

<li class="cursor-pointer p-2 flex"  v-for="(menu, index) in menus" :key="index" >
    <div class="w-full flex  items-center justify-between px-2" @click="handleSelect(menu,index)">  
        <div  class="text-sm w-full ">
            <i class="el-icon-document" ></i> {{ menu.name }} 
        </div>
    </div>

    <!-- menu show and hide-->
    <ul  class="py-4 px-1  rounded-b border-gray-100" v-show="menu.showed">
        {{ menu.description }} 
    </ul>
</li>

handleSelect(menu,index){
    console.log('select',index,menu.showed);
    this.menus[index].showed=!menu.showed
},    

menus:[
    { 
      name:'Introduction',
      showed: false,
      decription:''
    },
    { 
      name:'Feedback Is Important',
      showed: false,
      decription:''
    }, 
    { 
      name:'Client Briefing and Debriefing',
      showed: false,
      decription:''
    },                                                                          
]

我预期的结果是，当单击菜单标题时，菜单的展开状态可以显示和隐藏。但是，单击第一个菜单可以更改'showed'变量，但不显示展开状态，只有单击第二个菜单才会显示第一个菜单。
它似乎像v显示不工作，任何解决方案或想法来解决它或更好的方式来处理菜单显示。