Javascript Vue按标题分组而不是分组

嘿，我想把按钮分组在一个标题下。我用Vue尝试了几种方法，但似乎都不管用。我也不会犯太多错误。我要做的是将按钮分组到特定标题下。我正在使用Laravel和Vue。有两个计算函数-我两个都试过了，所以我也把两个都放在这里

以下是控制器中阵列的一部分：

       $commands = [
    [
      'id' => 1,
      'signature' => 'sync:whatever',
      'arguments' =>'',
      'title' =>'Sync Whatever',
      'groupID' => 1,
      'groupName' => 'GroupOne'
    ],

    [
      'id' => 2,
      'signature' => 'send:whatever',
      'arguments' =>'users',
      'title' =>'Send Whatever',
      'groupID' => 1,
      'groupName' => 'GroupOne'
    ],

    [
      'id' => 3,
      'signature' => 'sync:something',
      'arguments' =>'',
      'title' =>'Sync Something',
      'groupID' => 2,
      'groupName' => 'GroupTwo'
    ],
    }

以下是我的Vue组件：

    <div v-for="(commands, groupName) in grouped">
    <h4>@{{ groupName }}</h4>
  </div>
    <div class="col-md-12">
      <div class="btn-group" v-for="command in commands">

        <commands-component
                :entity-config="commandConfig(command.id, command.signature, command.arguments, command.title, command.groupID, command.groupName)">

                <input type="button" class="btn btn-primary btn-block" v-bind:value="command.title">
        </commands-component>
      </div>
    </div>

---

您已删除该输入标记，并将其放入按钮标记，它将正常工作

<div class="btn-group">
    <button type="button" class="btn btn-primary">btn-1</button>
    <button type="button" class="btn btn-primary">btn-2</button>
    <button type="button" class="btn btn-primary">btn-3</button
</div>

btn-1
btn-2
btn-3按钮不是问题，是标题不会分组。如果我的v-for是这样的：@{{groupName}，则输出显示2个标题，但按钮没有分组在标题下。标题在顶部相互下方，下方有27个按钮，未分组
<div class="btn-group">
    <button type="button" class="btn btn-primary">btn-1</button>
    <button type="button" class="btn btn-primary">btn-2</button>
    <button type="button" class="btn btn-primary">btn-3</button
</div>