<template>
  <v-list
    :tag="example.tag"
    :base="example.base"
    class="w-auto md:w-[500px]"
  >
    <v-list-item
      v-for="item in example.users"
      :active="item.active"
    >
      <div class="flex gap-x-4">
        <div>
          <div class="font-semibold">
            {{ item.full_name }}
          </div>
          <div class="text-text-400">
            {{ item.title }}
          </div>
        </div>
        <div class="text-sm text-gray-400 ml-auto">
          {{ item.department }}
        </div>
      </div>
    </v-list-item>
  </v-list>

</template>
  

    
  
  

    <script setup>
import { reactive } from "vue";
import company from "../example-data/company.json";

let example = reactive({
  users: company.slice(0, 5).map((i) => ({ ...i, active: false })),
  tag: "div",
  base: "list",
});

example.users[2].active = true;
</script>