You're getting this error from eslint which checks your code for possible errors and bad coding style.

When you use v-for on <template> , you need to make sure you define key on each top-level element within the <template> . This is because <template> is not an actual DOM element (within a Vue template) and so each element within it will be repeated at the same level in the DOM which is why key is required on each element at that DOM tree level.

You have a nested <template> , each using v-for , so it gets a bit more complicated. You need to make sure that the key of the first <tr> uses variables defined by both v-for s. Although in your specific case, you are using v-if to limit the element being created to only the first row, so eslint is being too pedantic here. You can silence the warning like this:

<!-- eslint-disable-next-line vue/valid-v-for --> <tr v-if="scorecardIndex === 0" v-bind:key="propertyIndex"> </tr>

But I think you have the order around the wrong way. It makes more sense to first check if it is the first row and then repeat a bunch of <tr> s, instead of the other way around:

<template v-if="scorecardIndex === 0"> <!-- Primary player --> <tr v-for="(property, propertyIndex) in properties" v-bind:key="propertyIndex"> </tr> </template>

Lastly, you will get some duplicate key warnings because both sets of <tr> s will use keys 0, 1, 2, and so on. Maybe prefix them: