Line drawing?

Question

JavaScript

<tbody>
    <tr @click="selectedRow(items[0],0)" v-bind:class="{lols: checkedIndex === 0}">
      <td class="actions">
        <span
          style="cursor:pointer;font-size:20px;font-weight:bold;"
          v-if="items.length > 1"
          v-text="showAll ? '-' : '+'"
          @click="showAll = !showAll">
        </span>
      </td>
      <td>{{items[0].client }}</td>
      <td>{{items[0].fromCity}}</td>
      <td>{{items[0].toCity}}</td>
      <td>{{items[0].date}}</td>
      <td>{{items[0].prepayment}}</td>
      <td>{{items[0].rate}}</td>
      <td>{{items[0].type}}</td>
      <td>{{items[0].status}}</td>
      <td>{{items[0].logist}}</td>
      <td>{{items[0].note}}</td>
    </tr>

    <template v-if="showAll">

      <tr v-for="(n,index) in items.slice(1)" v-bind:key="n._id"  @click="selectedRow(n,index)"  v-bind:class="{lols: checkedIndex === index}">
          <td class="actions"></td>
          <td>{{n.client }}</td>
          <td>{{n.fromCity}}</td>
          <td>{{n.toCity}}</td>
          <td>{{n.date}}</td>
          <td>{{n.prepayment}}</td>
          <td>{{n.rate}}</td>
          <td>{{n.type}}</td>
          <td>{{n.status}}</td>
          <td>{{n.logist}}</td>
          <td>{{n.note}}</td>
      </tr>

    </template>

  </tbody>

data: () => ({
      checkedIndex:-1,
    }),

selectedRow(app,ind){
            this.checkedIndex = this.checkedIndex === ind ? -1 : ind;

        // eslint-disable-next-line no-console
      console.log(this.checkedIndex);
        
      }

I can’t change styles for one element from the list of opening elements, all elements of this list are selected, with [0] it works as it should. Explain please..