JSFiddle - React, Tailwind, and code Playground

HTML

<div id="demo">
  <template v-for="(item, index) in itemlist">
    <label><input type="checkbox" :value="index" name="condiment" v-model="selectedItems" :disabled="selectedItems.length >= max && selectedItems.indexOf(index) == -1" /> {{item}}</label>
  </template>
  <div>{{selectedItems.join(', ')}}</div>
</div>

CSS

label {display: block}

JavaScript

var demo = new Vue({
    el: '#demo',
    data: {
        selectedItems: [],
        itemlist: [
        		"Mayo",
        		"Ketchup",
        		"Mustard",
        		"Honey"
        ],
        max: 1
    }
})