vue.jsのv-modelで複数のチェックボックスの状態を管理したい

やりたいこと

チェックボックスがいくつかあって、そのうちどれがチェックされているのかを知りたい。

とりあえず完成版コード

<template>
  <section>
    <div v-for="(poke, i) in pokes" :key="i">
      <input
        :id="'poke' + i"
        type="checkbox"
        :value="poke"
        v-model="selectedPokes"
      >
      <label :for="'poke' + i">{{poke}}</label>
    </div>
  </section>
</template>

<script>
export default {
  data() {
    return {
      pokes: [
        'ピカチュウ', 'カイリュー', 'ヤドラン', 'ピジョン', 'コダック', 'コラッタ', 'ズバット', 'ギャロップ'
      ],
      selectedPokes: []
    }
  }
}
</script>

詳しく

以下のように、チェックボックスひとつにつきv-modelをひとつ使えば実現できることはわかります。

<template>
  <section>
    <input
      id="pika"
      type="checkbox"
      v-model="pika"
    >
    <label for="pika">ピカチュウ</label>

    <input
      id="kai"
      type="checkbox"
      v-model="kai"
    >
    <label for="kai">カイリュー</label>

    <input
      id="yado"
      type="checkbox"
      v-model="yado"
    >
    <label for="yado">ヤドラン</label>
  </section>
</template>

<script>
export default {
  data() {
    return {
      pika: false,
      kai: false,
      yado: false
    }
  }
}
</script>

しかしチェックボックスが100個ある場合そうもいきません。
（ただしチェックボックスが実際に100個になるようなら設計を見直した方がよいです。）
また、リストをAPIなどから引っ張ってきて、チェックボックスがいくつになるか確定出来ない場合なども困ります。

解決方法

• checkbox要素に:valueを与える
• v-modelで配列として受け取る。

<div v-for="(poke, i) in pokes" :key="i">
  <input
    :id="'poke' + i"
    type="checkbox"
    :value="poke"
    v-model="selectedPokes"
  >
  <label :for="'poke' + i">{{poke}}</label>
</div>

selectedPokes: []

こうすることで上に貼ったgifのように複数の値を保持することが出来ます。

失敗パターン

v-modelを受け取るdataの初期値を配列にしておかないと失敗します。

selectedPokes: ''

おしまい

正直なぜこれでいけるのかよくわかっていません。
詳しい方ぜひ教えてください。

なお僕は「クサイハナ」までしか覚えていません。