<div id="app">
  <v-app>
    <v-form class="pa-4" ref="form">
      <p>フルーツ注文フォーム</p>
      <div v-for="fruit in fruits" :key="fruit.id">
        <v-checkbox
          v-model="selectedValues"
          :value="fruit.id"
          :label="fruit.name"
          :rules="validateCheckbox"
          :hide-details="true"
         />
      </div>
      <div v-show="!isValid" class="v-messages error--text">
        {{ validateCheckbox[0] }}
      </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: "みかん"},
        {id: 2, name: "りんご"},
        {id: 3, name: "いちご"},
        {id: 4, name: "ばなな"}
      ],
    
      selectedValues: [],

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