切换焦点后，浏览另一个元素组

Question

我想创建一个键盘。因此，我有一组字母（按钮A-F，G-L）和单个字母。我将注意力集中在按钮A-F和G-L上，并可以使用它们之间的箭头键进行导航。如果我单击按钮A-F，则使用ref ='a'将焦点切换到字母A，这是按钮中输入的值。 问题是当焦点在A上并且我想导航到B时，焦点不在B上，而是在按钮G-L上，在那里我可以再次在A-F和G-L之间导航。当焦点位于A上时，如何在A和B之间导航？ 对于导航，我使用空间导航。 谢谢您的帮助。

methods:
  switchFocusA() {
  this.$refs.a.focus();
  },

input:focus {
    background: yellow;
    outline: 0 none;
  }
  button:focus {
    background: yellow;
    outline:0 !important;
  }
  button.out {
    background: transparent;
    outline: none;
    border: none;
  }
  button {
    outline: none;
  }

<div >
  <button class="out" v-focus data-right="AUTOFOCUS" data-left="AUTOFOCUS" @click="handleClick">
    <input ref='a' class="letter" id="Button11" type="button" value="A"></button>
  <button class="out" v-focus data-right="AUTOFOCUS" data-left="AUTOFOCUS" @click="handleClick">
    <input class="letter" id="Button12" type="button" value="B"></button>
  <label>
    <input type="text" v-model="message">
  </label>
  <div>
    <button  @click="switchFocusA" v-focus data-default data-right="AUTOFOCUS" data-left="AUTOFOCUS">A-F</button>
    <button v-focus data-right="AUTOFOCUS" data-left="AUTOFOCUS">G-L</button>
  </div>
</div>