<div id="app">
  <v-app>
    <v-form class="pa-4" ref="form">
      <p>フルーツ注文フォーム</p>
      <div v-for="(fruit, index) in fruits" :key="fruit.id">
        <v-checkbox
          v-model="selectedValues"
          :value="fruit.id"
          :label="fruit.name"
          :rules="validateCheckbox"
          :hide-details="!isLastFruit(index)"
          :disabled="fruit.disabled"
         />
      </div>
      <v-btn
        color="success"
        class="mt-4"
        @click="submit"
      >
        送信
      </v-btn>
    </v-form>
  </v-app>
</div>

new Vue({
  el: '#app',
  
  vuetify: new Vuetify(),
  
  data () {
    return {
     fruits: [
        {id: 1, name: "みかん", disabled: false},
        {id: 2, name: "りんご", disabled: true},
        {id: 3, name: "いちご", disabled: false},
        {id: 4, name: "ばなな", disabled: true}
      ],
    
      selectedValues: [],

      isValid: true
    }
  },
  
  computed: {
    validateCheckbox () {
      return [this.selectedValues.length > 0 || "フルーツを選択してください"]
    }
  },
  
  methods: {
    isLastFruit (index) {
      return this.fruits.length -1 === index
    },
    
    submit () {
      if (!this.$refs.form.validate()) {
        this.isValid = false
      }
    }
  }
})