How to change the class on click for each element separately?

Question

Vue.js

Started learning Vue
I got to a certain point when the color switches, but for all objects at once and wondered how to switch for each separately? Specified active: true in each object, but it did not help

<template>
  <main>
      <ul>
          <li v-bind:class="{'greenlight': active}" v-for="data in webdata" :key="data.key" @click="data.show = !data.show" v-on:click="active = !active">
            <h3 v-show="data.show">{{data.name}}</h3>
          </li>
      </ul>
  </main>
</template>

export default {
  data () { 
    return {
      active: true,
      webdata: [
        {name: 'JavaScript', show: false},
        {name: 'Vue.js', show: false}, 
        {name: 'CSS', show: false}, 
        {name: 'HTML', show: false}
      ]
    }
  }
}

.greenlight {
  background: lightgreen;
}

Answer 1

You can check for activity not through the boolean flag, but set for example selected = data.key and the class then check
:class = "{'greenlight':selected == data.key}"

Answer 2

Use components . Through components you create your own component. And each such component in the list will be, as it were, a separate application with its own configuration.