Если вход ПРОВЕРЕН кнопка ВКЛЮЧИТЬ VUE JS

Question

Я пытаюсь включить следующую кнопку, только когда этот флажок установлен. Для этого я пытаюсь проверить, отмечена ли кнопка или нет. Затем после проверки и включения кнопки при переходе к следующему шагу кнопка должна быть снова отключена.

Я импортирую Detailsform0. vue внутри ProductPage. vue через элементы даты: [] поэтому каждая форма как отдельный файл. Может ли кто-нибудь помочь мне с тем, как включить кнопку при щелчке, чтобы установить флажок, а затем при щелчке дальше кнопка должна снова требовать того же условия. Заранее спасибо

DetailsForm0. vue это тест Я заполнил всю эту страницу

\\\\\ ProductPage.vue 
<template>
    <component v-bind:is="currentStep.details"></component>
    <button class="btn" v-on:click="backStep" id="back">Back</button>
    <button class="btn" v-on:click="nextStep" v-bind:disabled="checked === false" id="next">Next</button>
</template> /// DetailsForm0 <template>
    <component v-bind:is="currentStep.details"></component>
    <button class="btn" v-on:click="backStep" id="back">Back</button>
    <button class="btn" v-on:click="nextStep" v-bind:disabled="checked === false" id="next">Next</button></template>

  data: function () {
    return {
      items: [
        { stepTitle: 'Step 1', details: DetailsForm0 },
        { stepTitle: 'Step 2', details: DetailsForm1 },
        { stepTitle: 'Step 3', details: DetailsForm2 },
        { stepTitle: 'Step 4', details: DetailsForm3 }
      ],
      activeNumber: 0,
      checked:false
    }
  },

Answer 1

     [[[ DetailsForm0.vue]]] *** The check box is coming from DetailsForm0.Vue File  here what is in the file***
<template>
    <input type="checkbox" v-model="checked">I have filled all this page<br>
</template>
<script>
export default {
  name: 'DetailsForm',
  data: function () {
    return {
      checked: false
    }
  }
}
</script>
     [[[ ProductPage.vue]]] *** The DetailsForm0.Vue is getting imported here in ProductPage.vue File ***
    <template>
        <component v-bind:is="currentStep.details"></component>
        <button class="btn" v-on:click="backStep" id="back">Back</button>
        <button class="btn" v-on:click="nextStep" v-bind:disabled="checked === false" id="next">Next</button></template>

      data: function () {
        return {
          items: [
            { stepTitle: 'Step 1', details: DetailsForm0 },
            { stepTitle: 'Step 2', details: DetailsForm1 },
            { stepTitle: 'Step 3', details: DetailsForm2 },
            { stepTitle: 'Step 4', details: DetailsForm3 }
          ],
          activeNumber: 0,
          checked:false
        }
      },

    <script>
    methods: {
        toggleActive: function (index) {
          this.activeNumber = index
        },
        nextStep: function () {
          this.toggleActive(this.activeNumber + 1)
          this.checked = false
        }
        }