Vue2多重v-for场景

Question

roleList对象将具有以下数组：

{
  groupName: Client Login,
  roleID: 1,
  roleName: View Own Profile,
  roleChecked: false
},
{
  groupName: Client Login,
  roleID: 1,
  roleName: View Own Invoices,
  roleChecked: false
},
{
  groupName: Client Management,
  roleID: 1,
  roleName: View Clients,
  roleChecked: true
},
{
  groupName: Client Management,
  roleID: 1,
  roleName: Create Client,
  roleChecked: false
}

我希望groupName是具有该组名称下的角色列表的部分的标题。 groupName和roleName是复选框，因此如果单击groupName，还将检查所有相应的角色。如果未选中角色之一，则groupName也将取消选中。 roleChecked只是一个默认复选框（单击或未单击）。

因此示例为：

[]客户登录

[]查看自己的个人资料

[]查看自己的发票

我正在尝试弄清楚如何使用Vue2构建v-for和复选框的行为。我稍后可能会添加角色和组，因此需要动态添加。