VUE v-for中获取二维对象数组

对象数组如下：

[
    {
      "index": "2",
      "text": "办公平台",
      "submenu": [
        {
          "index": "2-1",
          "text": "企业内部消息"
        },
        {
          "index": "2-2",
          "text": "常用网站"
        },
        {
          "index": "2-3",
          "text": "e-file平台"
        }
      ]
    },
    {
      "index": "3",
      "text": "空运出口",
      "submenu": [
        {
          "index": "3-1",
          "text": "销售接单"
        },
        {
          "index": "3-2",
          "text": "航线管理"
        },
        {
          "index": "3-3",
          "text": "客户服务"
        },
        {
          "index": "3-4",
          "text": "配货操作"
        },
        {
          "index": "3-5",
          "text": "仓库收货"
        },
        {
          "index": "3-6",
          "text": "运单管理"
        },
        {
          "index": "3-7",
          "text": "主单管理"
        },
        {
          "index": "3-8",
          "text": "轨迹查看"
        },
        {
          "index": "3-9",
          "text": "空运出口报表"
        }
      ]
    },
    {
      "index": "4",
      "text": "结算管理",
      "submenu": [
        {
          "index": "4-1",
          "text": "单票结算"
        },
        {
          "index": "4-2",
          "text": "账单管理"
        },
        {
          "index": "4-3",
          "text": "发票管理"
        }
      ]
    },
    {
      "index": "5",
      "text": "系统管理",
      "submenu": [
        {
          "index": "5-1",
          "text": "系统数据维护"
        },
        {
          "index": "5-2",
          "text": "集团架构维护"
        },
        {
          "index": "5-3",
          "text": "系统运行代码维护"
        },
        {
          "index": "5-4",
          "text": "用户管理"
        },
        {
          "index": "5-5",
          "text": "权限管理"
        }
      ]
    }
  ]

html中的v-for如下：

如果用上图中红色字体就出错，必须要用中括号方式才能后取到，不知道为何！

以下为后续的中文乱码问题：

乱码如下图：

这个是项目中一个data.json文件作为数据源，因为这个文件保存时候不是UTF-8格式，而axios请求返回格式又是UTF-8，结果前后端不一致，就出现了这个乱码问题。

我的解决办法是将data.json文件内容放到txt里重新保存为UTF-8即可。