サーバーから取得してきたデータがVue.jsのチェックボックスに反映されない時

Laravelからboolean型のデータを取得してVue.jsで作成したチェックボックスにon,offを
反映させたい時にうまくチェックが入らないことがありました。
原因について備忘録を残しておきます。

原因

Laravelから送られてくるデータがboolean型だと仮定すると送られてくるデータは0か1になります。

しかし、Vue.jsで何も考えずv-modelを使用してチェックボックスを作成するとvalue値はtrueかfalseになります。そのため、デフォルトのままではLaravelから1が送られてきたとしてもチェックボックスにはチェックが入りません。

この現象は、Vue.jsからLaravel側にデータ送信する際は問題なく登録できてしまうのが困るところ…
(Laravelではtrueは1と判定してデータベースに登録してくれる)

$table->boolean( 'display_flag' )->default(false);  //0か1が入る

<input
  type="checkbox"
  v-model="display_flag"  //trueかfalseが入る
/>

チェックボックスのinputタグの中にtrue-valueとfalse-valueの記述を書いてやるとチェックした時の値を設定することができます。

<input
  type="checkbox"
  v-model="form.cancel_flag"
  true-value="1" //チェックすると"1"が入る
  false-value="0" //チェックがなければ"0"となる
/>