選択したボタン要素に色を付けた状態で保持→ボタン要素以外をクリックした際に、選択した色を保持したい

Question

添付の図の通り、A,Bのどちらか選択した方の情報を次画面に送信する画面をvue.jsで作っています。

実現したいこと

画像の赤斜線箇所（ボタン要素以外）をクリックした際に、A（またはB）で選択した際の色を保持したい。

現在の状況

選択したA（またはB）の色を変更し、色を保持するところまではできました。
（色を保持するタイミングは、他のボタン要素をクリックするまでの間）
が、ボタン要素以外の背景をクリックすると色の保持が外れます。

<!--選択エリア（A,B）-->
    <div id="target" tabindex="-1"
        v-for="object in data.loginListData" 
        :key="object.hogehoge"
        >
      <button 
          class="focused"
          :class='isSelected'
          @click="isFocus(object)"
        >{{ object.hogehoge}}</button>  
    </div> 
<!--次の画面に進むボタン（A,Bのフォーカスが当たっている方のデータを保持して送信）-->
    <button 
              class="btn w-150px h-28px text-center rounded-pill f-12px text-white bg-blue-013440 mx-auto d-block"
              @click="kigyousentakuClick()"
              >
        すすむ
      </button>

/* ------- 選択エリア（A,B）のcss(scss) ------- */
.focused {
  &:focus {
    background-color: #d2dfe2 !important;
  
  }
}

教えてほしいこと

JavaScriptなどで、ボタン要素以外をクリックしても、最後に選択したボタンの色は維持したままにできるようなコードを教えてほしいです。（別ボタンの選択以外ではクリック時の色を保持する）
実現方法に特に指定はありませんが、jQuery以外の方法がうれしいです。

◆参考にしてみたサイト（JavaScript初心者のためうまく実装できませんでした）
JavaScriptで特定の要素以外をクリックした時のイベント【jQuery不要】

hatena19様の回答をもとに修正

追加で教えていただきたいこと：
・v-forでラベルに一覧表示しているラジオボタンの色が、選択しても変わらない（動かない）
・クリックして色が変わるように修正したい

<!-- 前画面で取得(josn）した企業名を表示  -->
  <div class="item">
    <div
      v-for="object in data.loginListData"
      :key="object.label"
      class="btnBlock"
      @click="isFocus(object)"
      >
      <input
        :id="object.id"
        v-model="form.search_kigyo"
        type="radio"
        name="search_kigyo"
        class="input_radio_toggle_w-300px "
        :value="object.value"
        
      />
      <label :for="object.id">{{ object.kigyomei }}</label>
    </div>
  </div>

うまくいかない原因かなと思っていること：

いただいたリンクをもとに、以下のようにv-for内を記載すると、ラジオボタンの色は動くようになりますが、ここで呼び出している「data.loginListData」は、前画面からの情報をstrageに保存したものを呼び出しているため、頂いたリンクの通り固定のデータを指定できません。このような場合、どのように記述すればよろしいのでしょうか、、、、。

 <div
    v-for="object in [
    { id: 'search_hyojiflag_2', label: 'すべて', value: '2' },
    { id: 'search_hyojiflag_1', label: '表示のみ', value: '1' },
    { id: 'search_hyojiflag_0', label: '非表示のみ', value: '0' },
                    ]"

Comments

[Lhankor_Mhy]

data.loginListData に状態を持たせるのが vue っぽいのではないかな、と思うのですが、それではダメでしたか？

[hafmk]

Lhankor_Mhy様
コメントありがとうございます。
そのやり方でも問題無いのですが、初学者のためうまくできず挫折しておりこの方法で実施していたところです。もし方法をアドバイスいただけるのであれば幸いです。

Answer 1

一つしか選択できないという動作を、フォーカスがあるかどうかで判断するという時点で間違っていると思います。
背景をクリックしたらフォーカスが外れるのはブラウザの仕様ですので。

複数の選択肢から一つのみ選択するというならボタン<button>ではなく、ラジオボタン<input type="radio">を使うべきでしょう。

<input type="radio"> - HTML: HyperText Markup Language | MDN

Vue.jsでラジオボタン [radio button]

見た目をボタンのようにしたいというなら、
ラジオボタンは非表示にして関連付けたlabelをCSSでデザインすればいいでしょう。

Comments

[hafmk]

hatena19様
ありがとうございます。ご提示いただいた内容で実現に近づきました。現在解決できていない問題としては、下記があります。
質問を編集いたしましたので、可能であれば解決方法をご教示いただけますでしょうか。
・v-forでラベルに一覧表示しているラジオボタンの色が、選択しても変わらない（動かない）

v-for="object in data.loginListData”
ここで呼び出している「data.loginListData」は、前画面からの情報をstrageに保存したものを呼び出しているため、頂いたリンクの通り固定のデータを指定できません。
配列の中に｛｝でデータを記入するとラジオボタンは機能するようになりましたが、今度はデータが表示できなくなります。

わかりづらい説明で申し訳ございませんが、固定ではなく受け取ったデータを一覧表示するには、どのようなコードを書けばよいでしょうか。
ご教示いただけますと幸いです。

[hafmk]

追記：

追加で質問をしてしまいましたが、表題の回答はラジオボタンにすることで解決いたしましたのでベストアンサーとさせていただきます。
JOSNで取得したデータの表示については別の内容になりますので大変失礼いたしました。別途質問に挙げました。