How do I make Vuetify checkbox accurately reflect it's value?

I am attempting to get the vuetify checkbox to accurately display the correct checked value. For example I am making a check all box with 3 states [all, some, none]. If the state is none the box should be unchecked. If the state is all then it should be checked and some means it is indeterminate. My problem is that when the input-value is calculated as false and the v-checkbox gets clicked the checkbox will display as checked even though the value being fed to the component says it should be unchecked. How do I force the checkbox to always be what the input-value says it should be?

https://codepen.io/anon/pen/QRxoqL?&editable=true&editors=101

<v-checkbox :input-value="val"></v-checkbox>
...
data(){
  return {
    val: false,
  }
},

This is a simpler version but it illustrates my issue. When I click the checkbox in an unchecked state, it should remain unchecked unless the "val" variable changes to true. This will allow me to use a method to determine what state the checkbox should be displaying as and actually have that displaying.