Vue Js Remove Duplicate Object from Array

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <h3>Vue Js Remove Duplicate Object from Array</h3>
    <ul>
      <li v-for="item in items" :key="item.id">{{item.id}} {{ item.name }} {{item.role}}</li>
    </ul>
    <button @click="removeDuplicates">Remove Duplicates</button>

</div>

});
  </script>
  <style scoped>
    /* Reset default styles for better consistency */
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

/* Add some spacing and alignment to the app container */
    #app {
      padding: 20px;
      text-align: center;
      width: 600px;
      margin: 0 auto;
    }

/* Style the list */
    ul {
      list-style: none;
      margin-bottom: 20px;
    }

li {
      background-color: #f2f2f2;
      padding: 10px;
      margin-bottom: 10px;
      border-radius: 5px;
    }

/* Style the button */
    button {
      background-color: #007bff;
      color: #fff;
      padding: 10px 20px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }

button:hover {
      background-color: #0056b3;
    }
  </style>
</body>

</html>