WIP создал элемент long list

src/pages/clients/components/FormsAgreementCreate/AgreementPerson.vue

@@ -1,5 +1,6 @@
 <template lang="pug">
   .flex.flex-col.gap-y-6
+    
     base-input(
       label="ФИО пациента",
       v-model="patientFullName",
@@ -30,11 +31,11 @@
         :items="patientPhones"
       )
     input(:value='patientEqualClient') 
-    .text 'Пациент = Заказчик' + {{ patientEqualClient }}
-    base-input(
-      v-model="patient.full_name"
-      label="ФИО Заказчика",
-    )
+
+    kit-long-list(
+      :get-items="getPerson",
+      v-model="client",
+      label='Заказчик')
     //-.flex.justify-between
       base-custom-select.w-80(
         placeholder="Тип документа",
@@ -64,6 +65,8 @@
 import BaseInput from "@/components/base/BaseInput";
 import BaseCustomSelect from "@/components/base/BaseCustomSelect.vue";
 import BaseSelect from "@/components/base/BaseSelect.vue";
+import KitLongList from "@/components/kit/KitLongList.vue";
+
 import { mask } from "vue-the-mask";
 export default {
   name: "AgreementPerson",
@@ -71,6 +74,7 @@ export default {
     BaseInput,
     BaseCustomSelect,
     BaseSelect,
+    KitLongList,
   },
   directives: { mask },
   data() {
@@ -88,6 +92,7 @@ export default {
       },
       patientAddresses: [],
       patientPhones: [],
+      client: {},
     };
   },
   computed: {
@@ -108,5 +113,16 @@ export default {
       return `${this.patient.last_name} ${this.patient.first_name} ${this.patient.patronymic}`;
     },
   },
+  methods: {
+    getPerson(val) {
+      let vals = [
+        { id: 1, label: "Петров Антон Серггевич" },
+        { id: 2, label: "Мамк Антон Серггевич" },
+        { id: 3, label: "Петров Егор Анатольевич" },
+        { id: 4, label: "Антионо Антон Серггевич" },
+      ];
+      return vals.filter((el) => ~el.label.indexOf(val));
+    },
+  },
 };
 </script>