Using V-IF hides the template in the DOM

Inside of the DetailsForm.Vue I am using v-if and then in the Dom is hidding all the template. I dont understand why.

    <template>
  <div class="DetailsForm">
    this is a test
    <input type="checkbox" v-model="checked">I have filled all this page<br>
    <div class="test" v-if="!$.checked.required">
      This field is required
    </div>
    <button :disabled="!checked">Button</button>
  </div>
</template>
<script>
import { required } from 'vuelidate/lib/validators'
export default {
  name: 'DetailsForm',
  data: function () {
    return {
      checked: false
    }
  },
  validation: {
    checked: {
      required
    }
  }
}