具有复选框ID冲突的Vue.js组件

我有一个自定义Vue组件（vcheck），其中有一个带有标签的复选框：

<input 
    v-model="val" 
    type='checkbox' 
    :true-value="trueValue" 
    :false-value="falseValue"
    id="v-check"
>
<label for="v-check">{{val == trueValue ? displayChecked : displayUnchecked}}</label>

{{val==trueValue？displayChecked:displayUnchecked}

但问题是当我有多个实例（在父组件中）时，复选框的ID冲突：

<vcheck v-model="val1" display-checked="Yes" display-unchecked="No"></vcheck>
<vcheck v-model="val2" display-checked="Tested" display-unchecked="Untested"></vcheck>

---

因此，当我单击第二个复选框标签时，第一个复选框标签会发生变化（因为它们都具有相同的ID）。此时，我删除了ID，只需使用标签上的

@单击
事件。但是有没有一种方法可以为组件的每个实例生成唯一的id？
一种方法是将id作为道具传递给vcheck：

<vcheck v-model="val1" display-checked="Yes" display-unchecked="No" id="123">
</vcheck>



并将其用于复选框：

<input 
    v-model="val" 
    type='checkbox' 
    :true-value="trueValue" 
    :false-value="falseValue"
    :id="id"
>



如果您使用此选项，我建议您使用id道具。
这是一个好建议，但我希望尽可能减少声明。此外，它还需要跟踪ID。