Vue v-selectを使う時の注意点

どうもチャンクノです。
Vueのプラグインでv-selectというとても便利なプラグインがあります。
今回は仕事でそれを使った際、ちょっとだけ困ったことについて書きます。
何が問題だったかというと、気持ち長めにクリックしないとフォームに値が入らなかったことです。
解決方法を先に言うとlabelタグで囲っちゃダメだよってことです。
どういうことかは以下参照。

問題のコードがこちら

<label class="m-r-10">
  Hoge
 <v-select :options="hoges.map(hoge => hoge.foo)" v-model="hoge" placeholder="Hoge" class='form-group'></v-select>
 <input type="hidden" name="hoge_search_form[hoge]" v-model="hoge">
</label>

要素全体がlabelで囲われていますね。
これが諸悪の根源です。

正しくはこう

<label class="m-r-10">
  Hoge
</label>
<v-select :options="hoges.map(hoge => hoge.foo)" v-model="hoge" placeholder="Hoge" class='form-group'></v-select>
<input type="hidden" name="hoge_search_form[hoge]" v-model="hoge">

こうすることで期待する動きになりました。
そもそも要素全体をlabelで囲うことがおかしいのかもしれないですね。
htmlタグはしっかりと用途に合わせた使い方を心がけたいものです。
それでは今回はこの辺で！
皆様良きプログラミングライフを🙏