Create basic Person component + collect data by getter

components/Person/index.vue

@@ -0,0 +1,27 @@
+<template>
+  <router-link
+    class="person flex items-center cursor-pointer p-3 mb-2 rounded bg-gray-300 hover:bg-gray-400"
+    :to="`/people/${person.id}`"
+    tag="article"
+  >
+    <span class="mr-2 text-xl font-bold">{{
+      person.gender === "Female" ? "&#9792;" : "&#9794;"
+    }}</span>
+    <h4>{{ person.name }}</h4>
+  </router-link>
+</template>
+
+<script>
+export default {
+  name: "Person",
+  props: {
+    person: {
+      type: Object,
+      default: {},
+      required: true
+    }
+  }
+};
+</script>
+
+<style lang="css" scoped></style>