data-toggleがあるとv-modelでラジオボタンの値が取得できない、なぜ？

Question

前提・実現したいこと

bootstrapのデザインでラジオボタンを作り、vue.jsで値を取得したいです

https://cccabinet.jpn.org/bootstrap4/components/buttons#checkbox-and-radio-buttons
こちらのページを参考にラジオボタンを作成しました
そしてv-modelで値を取得しようと下記のコードを作成したのですが
値取得がうまくいかず、いろいろ試してみて data-toggle="buttons" を外してみたら値の取得ができるようになりました
ボタンの表示、切り替えもきちんと動作しています

しかし、本来必要であるはずの属性を外したにも関わらずなぜきちんと動作するのか仕組みがわかりません
また、これで正しいのか判断できず困っているので詳しい方からご教授いただきたいです

###該当のソースコード
CDN

	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

data-toggle="buttons"がついているとボタンを切り替えても初期値しか得られない

	<div class="container" id="app">

		<div class="btn-group btn-group-toggle" data-toggle="buttons">
			<label class="btn btn-secondary btn-sm" :class="{'active': index === picked}" v-for="(color, index) in colors">
				<input type="radio" name="colors" :value="index" autocomplete="off" v-model="picked"> {{color}}
			</label>
		</div>

		<button @click="show">click</button>
	</div>

var app = new Vue({
	el: '#app',
	data: {
		colors: [
			"赤",
			"青",
			"黄",
			"緑",
			"紫",
		],
		picked: 3,
	},
	methods: {
		show: function(){
			console.log(this.picked);
		}
	}
});

試したこと

・該当のソースコードでテストした場合
radioボタンをクリックすると見た目上は切り替わるが
showメソッドからは初期値の3しか表示されない

・該当のソースコードからdata-toggle="buttons"を外した場合
radioボタンをクリックすると見た目が切り替わり
showメソッドからも入力通りの値が表示される

・該当のソースコードからdata-toggle="buttons"とv-modelを外した場合
radioボタンをクリックすると見た目が切り替わらない

以上のことからv-modelがdata-toggleの役割を果たしているのではないかと思い
vue.jsとbootstrap.jsを読んでいるのですがなかなか理解できず質問することにしました

そもそもなぜdata-toggle="buttons"とv-modelが共存できないのかがわからないです

テスト環境

windows10
chromeブラウザ

Answer 1

data-toggle="buttons"はクリックした後のボタン部分のアクティブな状態を保持するものです。

見た目には現れなくともRadioのアクティブは保持されるので動作としては実行できるという事になります。

Comments

[shrle]

回答ありがとうございます

>見た目には現れなくともRadioのアクティブは保持されるので動作としては実行できるという事になります。
それがボタンを押すと見た目もきちんと切り替わるのです
情報の小出しになってしまい申し訳ないですが試したことを追記しました