例えばSwitchsを使う際、以下のようにv-modelを使うとちょっと困ることがある。

<!-- switch.vue -->
<template>
  <div class="item switch">
      <v-switch v-model="bool" @change="change"></v-switch>
  </div>
</template>

具体的にどう困るのかというと、上位コンポーネントによってこのコンポーネントの操作以外でboolが変わった場合 (例えばAll ResetみたいなボタンでこのComponentに渡しているboolの参照元プロパティがtrue -> falseになった場合とか)、boolプロパティ自体はリアクティブに反映されるが、Switchが動いてくれない。

色々試してみたが、結局valueを使うことでボタンもリアクティブに動いてくれるようになった

<v-switch :value="bool" @change="change"></v-switch>

ただ、この場合も少し問題があり、@changeで取って来れるvalueがswitch=falseの場合になぜかnullが返却されるようになる(v-modelを使うとちゃんとfalseが返ってくる)。

methods: {
   change(value) {
      // true or null を true or falseに変換してemit
      this.$emit("change", value ? true : false);
   }
}