2. prop drilling - 
App.vue
Stores items and role
Props
       |
Dashboard.vue
Receives and forwards data
Props
       |
ItemList.vue
Receives full list
Props (individual item)
       |
ItemCard.vue
Displays individual item

src/
│
├── components/
│   ├── Dashboard.vue
│   ├── ItemList.vue
│   ├── ItemCard.vue
│   └── AddItemForm.vue
│
├── App.vue
└── main.js
--------------------------
dashboard.vue


<template>
  <div class="container">
    <h1>Item Management Dashboard</h1>

    <p>Role: {{ role }}</p>

    <AddItemForm
      @add-item="$emit('add-item', $event)"
    />

    <ItemList
      :items="items"
      :role="role"
      @remove-item="$emit('remove-item', $event)"
    />
  </div>
</template>

<script setup>
import ItemList from "./ItemList.vue";
import AddItemForm from "./AddItemForm.vue";

defineProps(["items", "role"]);

defineEmits(["add-item", "remove-item"]);
</script>

<style scoped>
.container {
  max-width: 450px;
  margin: 30px auto;
  padding: 20px;
  background: white;
  border-radius: 8px;
}

h1 {
  text-align: center;
}
</style>


----------------------------------------------------
ItemList.vue


<template>
  <div>
    <h2>Item List</h2>

    <p v-if="items.length === 0">No items available.</p>

    <ItemCard
      v-for="item in items"
      :key="item.id"
      :item="item"
      :role="role"
      @remove-item="$emit('remove-item', $event)"
    />
  </div>
</template>

<script setup>
import ItemCard from "./ItemCard.vue";

defineProps(["items", "role"]);

defineEmits(["remove-item"]);
</script>

------------------------------------------------
Itemcard.vue


<template>
  <div class="card" :class="role">

    <h3>{{ item.name }}</h3>

    <button
      v-if="role === 'admin'"
      @click="$emit('remove-item', item.id)"
    >
      Remove
    </button>

    <p v-else>View Only</p>

  </div>
</template>

<script setup>
defineProps(["item", "role"]);

defineEmits(["remove-item"]);
</script>

<style scoped>
.card {
  padding: 12px;
  margin: 10px 0;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.admin {
  border-left: 4px solid green;
}

.user {
  border-left: 4px solid blue;
}

button {
  padding: 7px 12px;
  background: #e53935;
  color: white;
  border: none;
  cursor: pointer;
}
</style>
---------------------------------------------
AddItemForm.vue


<template>
  <div>
    <input v-model="name" placeholder="Enter item name">

    <button @click="addItem">Add Item</button>
  </div>
</template>

<script setup>
import { ref } from "vue";

const emit = defineEmits(["add-item"]);

const name = ref("");

function addItem() {
  if (name.value.trim()) {
    emit("add-item", name.value.trim());
    name.value = "";
  }
}
</script>

<style scoped>
input {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

button {
  padding: 10px;
  margin-left: 8px;
  background: #2196f3;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
</style>

---------------------------
app.vue

<template>
  <Dashboard
    :items="items"
    :role="role"
    @add-item="addItem"
    @remove-item="removeItem"
  />
</template>

<script setup>
import { ref } from "vue";
import Dashboard from "./components/Dashboard.vue";

const role = ref("admin");

const items = ref([
  { id: 1, name: "Item One" },
  { id: 2, name: "Item Two" },
  { id: 3, name: "Item Three" }
]);

function addItem(name) {
  items.value.push({
    id: Date.now(),
    name
  });
}

function removeItem(id) {
  items.value = items.value.filter(item => item.id !== id);
}
</script>

<style>
body {
  font-family: Arial, sans-serif;
  background: #f2f2f2;
  margin: 0;
  padding: 20px;
}
</style>
---------------------------
main.js


import { createApp } from "vue";
import App from "./App.vue";

createApp(App).mount("#app");
