Vue.js コンポーネント

Question

HTMLで作成したFormがあります
f.selectの部分が同じ構造になっているのですが、Vue.jsのコンポーネントでまとめることは可能でしょうか？

new.html

  <div class="attack">
    <p>攻撃力</p>
    <%= f.select :attack,[["1",1],["2",2],["3",3],["4",4],["5",5]],include_blank: "選択してください"%>
  </div>
  <div class="defencive">
    <p>守備力</p>
    <%= f.select :defensive,[["1",1],["2",2],["3",3],["4",4],["5",5]],include_blank: "選択してください"%>
  </div>
  <div class="pitcher">
    <p>投手力</p>
    <%= f.select :pitcher,[["1",1],["2",2],["3",3],["4",4],["5",5]],include_blank: "選択してください"%>
  </div>
  <div class="comprehensive">
    <p>総合力</p>
    <%= f.select :comprehensive,[["1",1],["2",2],["3",3],["4",4],["5",5]],include_blank: "選択してください"%>
  </div>

###Vue.js
コンポーネントについて調べるとこういう使い方みたいですが、セレクトタグをtemplateに入れる記述が分かりません。

new.js

Vue.component('my-component'{
  template: '????'
})

もういい！！