Edit in JSFiddle

var app = new Vue({
  el: '#app',
  data: {
    selected_animal: "",
    selected_type : "",
    selected_types: [],
    animals : [
      "犬",
      "猫",
      "鳥"
    ],
    type : [
      [
        "チワワ",
        "柴犬",
        "コーギー",
        "シベリアン・ハスキー"
      ],
      [
        "シャム",
        "ペルシャ",
        "ラグドール",
        "ロシアンブルー"
      ],
      [
        "ハチドリ",
        "ツバメ",
        "ペンギン",
        "フクロウ"
      ]
    ]
  },
  methods : {
    _set_animal : function(){
      this.selected_type = "";
      this.selected_types = this.type[this.selected_animal];
    }
  }
})

              
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset='utf-8'>
    <title>Vue App</title>
</head>
<body>
    <div id="app">
      <div>
        <label>動物</label>
          <select v-model="selected_animal" v-on:change="_set_animal">
            <option value="">選択してください</option>
            <option v-for="(animal, index) in animals" v-bind:value="index">{{animal}}</option>
          </select>
      </div>
      <div v-if="selected_types.length > 0">
        <label>種類</label>
          <select v-model="selected_type">
            <option value="">選択してください</option>
            <option v-for="(types, index) in selected_types">{{types}}</option>
          </select>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
    <script src="main.js"></script>
</body>
</html>