Использование V-IF скрывает шаблон в DOM

Question

Внутри DetailsForm. Vue Я использую v-if, а затем в Dom скрывает весь шаблон. Не понимаю почему.

    <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
    }
  }
}