title: Vuetify: checkbox shows status is checked when it is unchecked, and vice versa
body: <p>Let me simplify the issue:</p>
  
  <p>I have a checkbox in my Vue.js template (using Vuetify components):</p>
  
  <pre><code>&lt;v-checkbox 
     v-model="selected" 
     label="John"
     value="John"
     id ="john" 
     @click.native="checkit"&gt;
  &lt;/v-checkbox&gt; 
  </code></pre>
  
  <p>The <code>checkit()</code> method code is:</p>
  
  <pre><code>checkit: function() {
    let elt = document.getElementById('john')
    if(elt.checked) {
      console.log('checked')
    } else {
      console.log('unchecked')
    }
  }
  </code></pre>
  
  <p>But I am getting the opposite result: when it is checked it says it is unchecked and vice versa.</p>
  
  <p>What causes this and how to fix it?</p>
  
  <p><a href="https://codepen.io/begueradj/pen/NLVvom?editors=1010" rel="nofollow noreferrer">Codepen demo</a></p>