Javascript get name from email address | React Js

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>

<body>
    <div id="app">
      <h2>Vue Js Get name from email address</h2>
      <ul>
        <li v-for="email in emails" :key="email">
          <strong>{{ email }}</strong> - {{ extractNameFromEmail(email) }}
        </li>
      </ul>
    </div>

if (lastName) {
              return `${firstName} ${lastName}`;
            } else {
              return firstName;
            }
          },
        },
      });
    </script>

/* Style for the unordered list */
      ul {
        list-style-type: none;
        padding: 0;
      }

/* Style for each list item */
      li {
        margin-bottom: 10px;
        padding: 10px;
        background-color: #fff;
        border-radius: 5px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }

/* Style for the email address */
      strong {
        color: #333;
      }

/* Style for the extracted name */
      .extracted-name {
        color: #666;
      }
    </style>
  </body>
</html>