Untitled

<template>
  <div>
    <ul>
      <li v-for="user in users" :key="user.id">
        {{ user.name }} - <strong>{{ user.active ? 'Active' : 'Inactive' }}</strong>
        <button @click="toggleActive(user)">Toggle Active</button>
      </li>
    </ul>
  </div>
</template>

<script>
import { reactive } from 'vue';

export default {
  setup() {
    const users = reactive([
      { id: 1, name: 'Alice', active: false },
      { id: 2, name: 'Bob', active: true }
    ]);

    function toggleActive(user) {
      user.active = !user.active;
    }

    return { users, toggleActive };
  }
}
</script>