[Vue warn]: Duplicate keys detected

[Vue warn]: Duplicate keys detected: '0'. This may cause an update error.

再現方法

<div>
  <div>
    <div v-for="(device, deviceIndex) in devices" :key="deviceIndex">
      {{ device.name }}
    </div>
    <div v-for="(sensor, sensorIndex) in sensors" :key="sensorIndex">
      {{ sensor.name }}
    </div>
	</div>
</div>

同一の親要素のもとでv-forを複数使うときは:keyが重複してはならない

上記の場合、deviceIndexとsensorIndexが被った時怒られる。

対策

<div>
  <div>
    <div v-for="(device, deviceIndex) in devices" :key="`device-${deviceIndex}`">
      {{ device.name }}
    </div>
    <div v-for="(sensor, sensorIndex) in sensors" :key="`sensor-${sensorIndex}`">
      {{ sensor.name }}
    </div>
	</div>
</div>

プレフィックスをつけて無理やり被らないようにする。

というかこうするしかないのか・・・