Why does the key error occur?

Question

Vue.js

Hi all.
Guys, tell me why is this happening?
I made a project on Galp, connected the view as a library and had to write all the components in js in this way:

spoiler

Didn't give any errors. The site has been working fine for several months now, there are no errors in the console.
Recently I decided to remake the site in SPA on VUE CLI and now I'm facing a problem. When transferring the contents of the components from js to the file.vue format, a bunch of errors got out))) (not surprised, because I'm still learning the view) But one of them is a key error (in this case, the index) in the vi-for directive . Which doesn't fit in my head.
If I paste as it was, then an error pops up:

spoiler

If I move the index to a new line, then everything is ok:

spoiler

To be honest, I don’t fully understand how to work with keys correctly, but if I understood everything correctly, then the key (: key) should be in the same place as v-for. Tell me, what is the error and how to configure the keys correctly? Where am I wrong?

Answer 1

If the content of the error is translated, it sounds something like this:
"Use keys only on real elements"
The template element is a conditional element, so the solution to the problem will be as follows:

<ul class = "dots">
  <li v-for = "(value, index) in cd.software" :key = "index">{{ value }}</li>
</ul>