使用多个容器实例时重复ID

Question

假设我有一个JS组件-我正在使用Vue.JS-带有复选框和相关标签：

<template>
    <input id="field1" type="checkbox">
    <label for="field1">
        Some label
    </label>
</template>

现在，由于我们将组件设计为可重用，所以我想同时在我的应用程序的多个位置使用它。问题： ID重复，并且单击复选框的标签会检查另一个复选框，因为它们共享相同的ID。

如何解决这个问题？

目前，我正在组件安装时生成一个随机的十六进制ID，以生成唯一的ID值，但是感觉太黑了。