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}
    }
  }