Javascript VueJs未更新阵列

我试图在vue上创建一个动态菜单，但是，当我试图将“活动”css类应用于菜单项时，发现菜单变量“menuFomartado”没有被vue更新，我怎么想

此代码仅在再次加载页面时有效

<script>
export default {
  data() {
    return {
      menuFomartado: [],
      menu: [
        {
          icon: "fa fa-chart-area",
          pageName: "dashboard",
          title: "Dashboard",
          role: "admin"
        },
        {
          icon: "fa fa-user-circle",
          pageName: "clientes",
          title: "Clientes",
          role: "admin"
        },
    
      ]
    };
  },
  computed: {
    sideMenu() {
      return this.nestedMenu(this.menu);
    }
  },
  watch: {
    $route() {
      this.menuFomartado = this.sideMenu;
    }
  },
  mounted() {
    this.menuFomartado = this.nestedMenu(this.sideMenu);
  },
  methods: {
    nestedMenu(menu) {
      menu.forEach((item, key) => {
        if (typeof item !== "string" && item.pageName != "") {
          menu[key].active = item.pageName == this.$route.name;
        }
      });

      return menu;
    }
  }
};
</script>

导出默认值{
数据（）{
返回{
menuFomartado:[]，
菜单：[
{
图标：“fa图表区”，
页面名称：“仪表板”，
标题：“仪表板”，
角色：“管理员”
},
{
图标：“足总用户圈”，
页面名称：“客户”，
标题：“客户”，
角色：“管理员”
},
]
};
},
计算：{
侧菜单（）{
返回此.nestedMenu（此.menu）；
}
},
观察：{
$route（）{
this.menuFomartado=this.sideMenu；
}
},
安装的（）{
this.menuFomartado=this.nestedMenu（this.sideMenu）；
},
方法：{
嵌套菜单（菜单）{
menu.forEach（（项目，键）=>{
if（项目类型！==“字符串”&&item.pageName！=”“）{
菜单[key].active=item.pageName==this.$route.name；
}
});
返回菜单；
}
}
};

基于@pierre said from post

我刚换了线路

menu[key].active = item.pageName == this.$route.name;

到

而且效果很好

this.$set(menu[key], "active", item.pageName == this.$route.name);