vue实现二级菜单的显示或隐藏

场景：二级菜单用html写死的，而不是以通过data和v-for动态生成的

今天在实现的过程中，出现了问题。实现思路如下：
data中设置menuIsShow为一个数组，数组的元素为boolean值，表示一级菜单是否显示或隐藏。
在html中对应的二级菜单元素上绑定menuIsShow的值，如:class="{showItem:menuIsShow[0]}"，然后在对应的一级菜单元素上绑定事件改变menuIsShow的值，即@click="menuIsShow[0] = !menuIsShow[0]"

在浏览器中，点击一级菜单，无报错，对应的二级菜单也没展开，但是通过vue Devtools观察到，每点击一次一级菜单，对应的menuIsShow没有改变，刷新一下组件，menuIsShow的值才会改变。

于是，得出结论，页面中绑定的数组发生变化后，页面需要刷新组件才能观察到数组的值发生变化。
vue小白暂时不知道这是为什么，但是感觉使用对象就可以解决这个问题，果然实现了。以下是实现的代码：

//一级菜单
<a  @click="menuIsShow.menuOne = !menuIsShow.menuOne"><span>系统管理</span></a>
//二级菜单
<dl class="layui-nav-child"  :class="{layui_nav_itemed: menuIsShow.menuOne}">
      <dd>
            <router-link to="/menuManage">菜单管理</router-link>
      </dd>
      <dd>
            <router-link to="/userManage">用户管理</router-link>
       </dd>
       <dd>
            <router-link to="/roleManage">角色管理</router-link>
       </dd>
 </dl>
 //一级菜单
 <a @click="menuIsShow.menuTwo = !menuIsShow.menuTwo"><span>系统监控</span></a>
 //二级菜单
<dl class="layui-nav-child" :class="{layui_nav_itemed: menuIsShow.menuTwo}">
   <dd>
       <a ><span>系统日志</span></a>
   </dd>
   <dd>
        <a ><span>接口api</span></a>
   </dd>
   <dd>
        <a ><span>系统监控</span></a>
   </dd>
   <dd>
        <a ><span>定时任务</span></a>
    </dd>
</dl>

data(){
    return {
      subMenuIndex:'',
      menuIsShow:{menuOne:false,menuTwo:false}
    }
  }