Vue.js v-modelで更新された配列を随時ソートする

ちょっとハマったところ

watchで自分自身を変更すると無限ループにハマるので新旧データを数を見比べて値の増減があったときのみソートとする。

コード

new Vue({
  el: '.app',
  watch: {
    checkedPrefectures(oldVal, newVal) {
      // このIFがないと無限ループが発生する
      if (oldVal.length !== newVal.length) {
        this.checkedPrefectures.sort((a, b) => b.code - a.code)
      }
    }
  },
  data: {
    checkedPrefectures: [], // 選択済み都道府県
    prefectures: [
      { "code": 1, "name": "北海道"},
      { "code": 2, "name": "青森県"},
      { "code": 3, "name": "岩手県"},
      // ...etc
    ]
  }
});

選択された都道府県をID降順で並び替えて表示するサンプル

See the Pen by MA (@micro_jp_) on CodePen.