W3Schools Tryit Editor

<!DOCTYPE html>
<html>
<head>
  <title>Moose count</title>
  <style>
    form {
      border: dashed black 1px;
      display: inline-block;
      padding: 10px;
    }
    label {
      padding: 5px;
    }
    label:hover {
      cursor: pointer;
      background-color: lightgray;
      border-radius: 5px;
    }
  </style>
</head>
<body>

<h1>Example: Computed Property 'yes' or 'no'</h1>
<p>In this example we give the user feedback 'yes' or 'no' when the checkbox is toggled. Feedback 'yes' or 'no' fits better with our everyday language than 'true' or 'false', and we use a computed property in this example to achieve this.</p>
<div id="app">
  <form>
    <p>
      Important item?
      <label>
         <input type="checkbox" v-model="chbxVal"> 
         {{ isImportant }}
      </label>
    </p>
  </form>
</div>

</body>
</html>