diff --git a/dev/Dev.vue b/dev/Dev.vue
index 5096a5a..49fddb1 100644
--- a/dev/Dev.vue
+++ b/dev/Dev.vue
@@ -1,13 +1,32 @@
+<script lang="ts" setup>
+import StyledComboBox from '@/components/ComboBox/StyledComboBox.vue'
+import ComboBoxOption from '@/components/ComboBox/ComboBoxOption.vue'
+import ComboBox from '@/components/ComboBox/ComboBox.vue'
+import ComboBoxMenu from '@/components/ComboBox/ComboBoxMenu.vue'
+import ComboBoxButton from '@/components/ComboBox/ComboBoxButton.vue'
+import ComboBoxInput from '@/components/ComboBox/ComboBoxInput.vue'
+import { countriesAndCodes } from '@docs/assets/static/data'
+import { ref } from 'vue'
+
+const selected = ref<{
+  styled: { id: string; label: string } | null
+  default: { id: string; label: string } | null
+}>({
+  styled: null,
+  default: null,
+})
+</script>
+
 <template>
   <div class="flex flex-col items-center space-y-10 justify-center pt-40">
     <StyledComboBox
       :label="({ label }) => label"
-      v-model="selected"
-      :options="config.options"
+      v-model="selected.styled"
+      :options="countriesAndCodes"
     >
       <ComboBoxOption
-        @click="selected = country"
-        v-for="country in config.options"
+        @click="selected.styled = country"
+        v-for="country in countriesAndCodes"
         :key="country.id"
         :class="['px-2 py-1']"
         :value="country"
@@ -25,7 +44,7 @@
         class="px-2 border flex rounded items-center justify-center h-12 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
       >
         <div class="flex-1">
-          {{ selected?.label }}
+          {{ selected.default?.label }}
         </div>
         <div>
           <svg
@@ -50,7 +69,7 @@
       >
         <ComboBoxOption
           @click="selected = country"
-          v-for="country in config.options"
+          v-for="country in countriesAndCodes"
           as="button"
           :key="country.id"
           :class="['px-2 py-1 flex text-left hover:bg-gray-100 w-full']"
@@ -65,35 +84,3 @@
     </ComboBox>
   </div>
 </template>
-
-<script>
-import countries from '../docs/.vuepress/data/countryCodes.js'
-import StyledComboBox from '@/components/ComboBox/StyledComboBox.vue'
-import ComboBoxOption from '@/components/ComboBox/ComboBoxOption.vue'
-import ComboBox from '@/components/ComboBox/ComboBox.vue'
-import ComboBoxMenu from '@/components/ComboBox/ComboBoxMenu.vue'
-import ComboBoxButton from '@/components/ComboBox/ComboBoxButton.vue'
-import ComboBoxInput from '@/components/ComboBox/ComboBoxInput.vue'
-
-export default {
-  components: {
-    ComboBoxInput,
-    ComboBoxButton,
-    ComboBoxMenu,
-    ComboBox,
-    ComboBoxOption,
-    StyledComboBox,
-  },
-  data: () => ({
-    selected: {
-      styled: null,
-      composed: null,
-    },
-    open: false,
-
-    config: {
-      options: countries,
-    },
-  }),
-}
-</script>
diff --git a/docs/assets/static/data.ts b/docs/assets/static/data.ts
index e69de29..ae756de 100644
--- a/docs/assets/static/data.ts
+++ b/docs/assets/static/data.ts
@@ -0,0 +1,660 @@
+export const countries: string[] = [
+  'Afghanistan',
+  'Åland Islands',
+  'Albania',
+  'Algeria',
+  'American Samoa',
+  'Andorra',
+  'Angola',
+  'Anguilla',
+  'Antarctica',
+  'Antigua and Barbuda',
+  'Argentina',
+  'Armenia',
+  'Aruba',
+  'Australia',
+  'Austria',
+  'Azerbaijan',
+  'Bahamas',
+  'Bahrain',
+  'Bangladesh',
+  'Barbados',
+  'Belarus',
+  'Belgium',
+  'Belize',
+  'Benin',
+  'Bermuda',
+  'Bhutan',
+  'Bolivia',
+  'Bosnia and Herzegovina',
+  'Botswana',
+  'Bouvet Island',
+  'Brazil',
+  'British Indian Ocean Territory',
+  'Brunei Darussalam',
+  'Bulgaria',
+  'Burkina Faso',
+  'Burundi',
+  'Cambodia',
+  'Cameroon',
+  'Canada',
+  'Cape Verde',
+  'Cayman Islands',
+  'Central African Republic',
+  'Chad',
+  'Chile',
+  'China',
+  'Christmas Island',
+  'Cocos (Keeling) Islands',
+  'Colombia',
+  'Comoros',
+  'Congo',
+  'Congo, The Democratic Republic of The',
+  'Cook Islands',
+  'Costa Rica',
+  "Cote D'ivoire",
+  'Croatia',
+  'Cuba',
+  'Cyprus',
+  'Czech Republic',
+  'Denmark',
+  'Djibouti',
+  'Dominica',
+  'Dominican Republic',
+  'Ecuador',
+  'Egypt',
+  'El Salvador',
+  'Equatorial Guinea',
+  'Eritrea',
+  'Estonia',
+  'Ethiopia',
+  'Falkland Islands (Malvinas)',
+  'Faroe Islands',
+  'Fiji',
+  'Finland',
+  'France',
+  'French Guiana',
+  'French Polynesia',
+  'French Southern Territories',
+  'Gabon',
+  'Gambia',
+  'Georgia',
+  'Germany',
+  'Ghana',
+  'Gibraltar',
+  'Greece',
+  'Greenland',
+  'Grenada',
+  'Guadeloupe',
+  'Guam',
+  'Guatemala',
+  'Guernsey',
+  'Guinea',
+  'Guinea-bissau',
+  'Guyana',
+  'Haiti',
+  'Heard Island and Mcdonald Islands',
+  'Holy See (Vatican City State)',
+  'Honduras',
+  'Hong Kong',
+  'Hungary',
+  'Iceland',
+  'India',
+  'Indonesia',
+  'Iran, Islamic Republic of',
+  'Iraq',
+  'Ireland',
+  'Isle of Man',
+  'Israel',
+  'Italy',
+  'Jamaica',
+  'Japan',
+  'Jersey',
+  'Jordan',
+  'Kazakhstan',
+  'Kenya',
+  'Kiribati',
+  "Korea, Democratic People's Republic of",
+  'Korea, Republic of',
+  'Kuwait',
+  'Kyrgyzstan',
+  "Lao People's Democratic Republic",
+  'Latvia',
+  'Lebanon',
+  'Lesotho',
+  'Liberia',
+  'Libyan Arab Jamahiriya',
+  'Liechtenstein',
+  'Lithuania',
+  'Luxembourg',
+  'Macao',
+  'Macedonia, The Former Yugoslav Republic of',
+  'Madagascar',
+  'Malawi',
+  'Malaysia',
+  'Maldives',
+  'Mali',
+  'Malta',
+  'Marshall Islands',
+  'Martinique',
+  'Mauritania',
+  'Mauritius',
+  'Mayotte',
+  'Mexico',
+  'Micronesia, Federated States of',
+  'Moldova, Republic of',
+  'Monaco',
+  'Mongolia',
+  'Montenegro',
+  'Montserrat',
+  'Morocco',
+  'Mozambique',
+  'Myanmar',
+  'Namibia',
+  'Nauru',
+  'Nepal',
+  'Netherlands',
+  'Netherlands Antilles',
+  'New Caledonia',
+  'New Zealand',
+  'Nicaragua',
+  'Niger',
+  'Nigeria',
+  'Niue',
+  'Norfolk Island',
+  'Northern Mariana Islands',
+  'Norway',
+  'Oman',
+  'Pakistan',
+  'Palau',
+  'Palestinian Territory, Occupied',
+  'Panama',
+  'Papua New Guinea',
+  'Paraguay',
+  'Peru',
+  'Philippines',
+  'Pitcairn',
+  'Poland',
+  'Portugal',
+  'Puerto Rico',
+  'Qatar',
+  'Reunion',
+  'Romania',
+  'Russian Federation',
+  'Rwanda',
+  'Saint Helena',
+  'Saint Kitts and Nevis',
+  'Saint Lucia',
+  'Saint Pierre and Miquelon',
+  'Saint Vincent and The Grenadines',
+  'Samoa',
+  'San Marino',
+  'Sao Tome and Principe',
+  'Saudi Arabia',
+  'Senegal',
+  'Serbia',
+  'Seychelles',
+  'Sierra Leone',
+  'Singapore',
+  'Slovakia',
+  'Slovenia',
+  'Solomon Islands',
+  'Somalia',
+  'South Africa',
+  'South Georgia and The South Sandwich Islands',
+  'Spain',
+  'Sri Lanka',
+  'Sudan',
+  'Suriname',
+  'Svalbard and Jan Mayen',
+  'Swaziland',
+  'Sweden',
+  'Switzerland',
+  'Syrian Arab Republic',
+  'Taiwan, Province of China',
+  'Tajikistan',
+  'Tanzania, United Republic of',
+  'Thailand',
+  'Timor-leste',
+  'Togo',
+  'Tokelau',
+  'Tonga',
+  'Trinidad and Tobago',
+  'Tunisia',
+  'Turkey',
+  'Turkmenistan',
+  'Turks and Caicos Islands',
+  'Tuvalu',
+  'Uganda',
+  'Ukraine',
+  'United Arab Emirates',
+  'United Kingdom',
+  'United States',
+  'United States Minor Outlying Islands',
+  'Uruguay',
+  'Uzbekistan',
+  'Vanuatu',
+  'Venezuela',
+  'Viet Nam',
+  'Virgin Islands, British',
+  'Virgin Islands, U.S.',
+  'Wallis and Futuna',
+  'Western Sahara',
+  'Yemen',
+  'Zambia',
+  'Zimbabwe',
+]
+
+export const countriesAndCodes: { value: string; label: string }[] = [
+  { value: 'AF', label: 'Afghanistan' },
+  { value: 'AX', label: 'Åland Islands' },
+  { value: 'AL', label: 'Albania' },
+  { value: 'DZ', label: 'Algeria' },
+  { value: 'AS', label: 'American Samoa' },
+  { value: 'AD', label: 'Andorra' },
+  { value: 'AO', label: 'Angola' },
+  { value: 'AI', label: 'Anguilla' },
+  { value: 'AQ', label: 'Antarctica' },
+  { value: 'AG', label: 'Antigua and Barbuda' },
+  { value: 'AR', label: 'Argentina' },
+  { value: 'AM', label: 'Armenia' },
+  { value: 'AW', label: 'Aruba' },
+  { value: 'AU', label: 'Australia' },
+  { value: 'AT', label: 'Austria' },
+  { value: 'AZ', label: 'Azerbaijan' },
+  { value: 'BS', label: 'Bahamas' },
+  { value: 'BH', label: 'Bahrain' },
+  { value: 'BD', label: 'Bangladesh' },
+  { value: 'BB', label: 'Barbados' },
+  { value: 'BY', label: 'Belarus' },
+  { value: 'BE', label: 'Belgium' },
+  { value: 'BZ', label: 'Belize' },
+  { value: 'BJ', label: 'Benin' },
+  { value: 'BM', label: 'Bermuda' },
+  { value: 'BT', label: 'Bhutan' },
+  { value: 'BO', label: 'Bolivia' },
+  { value: 'BA', label: 'Bosnia and Herzegovina' },
+  { value: 'BW', label: 'Botswana' },
+  { value: 'BV', label: 'Bouvet Island' },
+  { value: 'BR', label: 'Brazil' },
+  { value: 'IO', label: 'British Indian Ocean Territory' },
+  { value: 'BN', label: 'Brunei Darussalam' },
+  { value: 'BG', label: 'Bulgaria' },
+  { value: 'BF', label: 'Burkina Faso' },
+  { value: 'BI', label: 'Burundi' },
+  { value: 'KH', label: 'Cambodia' },
+  { value: 'CM', label: 'Cameroon' },
+  { value: 'CA', label: 'Canada' },
+  { value: 'CV', label: 'Cape Verde' },
+  { value: 'KY', label: 'Cayman Islands' },
+  { value: 'CF', label: 'Central African Republic' },
+  { value: 'TD', label: 'Chad' },
+  { value: 'CL', label: 'Chile' },
+  { value: 'CN', label: 'China' },
+  { value: 'CX', label: 'Christmas Island' },
+  { value: 'CC', label: 'Cocos (Keeling) Islands' },
+  { value: 'CO', label: 'Colombia' },
+  { value: 'KM', label: 'Comoros' },
+  { value: 'CG', label: 'Congo' },
+  { value: 'CD', label: 'Congo, The Democratic Republic of The' },
+  { value: 'CK', label: 'Cook Islands' },
+  { value: 'CR', label: 'Costa Rica' },
+  { value: 'CI', label: "Cote D'ivoire" },
+  { value: 'HR', label: 'Croatia' },
+  { value: 'CU', label: 'Cuba' },
+  { value: 'CY', label: 'Cyprus' },
+  { value: 'CZ', label: 'Czech Republic' },
+  { value: 'DK', label: 'Denmark' },
+  { value: 'DJ', label: 'Djibouti' },
+  { value: 'DM', label: 'Dominica' },
+  { value: 'DO', label: 'Dominican Republic' },
+  { value: 'EC', label: 'Ecuador' },
+  { value: 'EG', label: 'Egypt' },
+  { value: 'SV', label: 'El Salvador' },
+  { value: 'GQ', label: 'Equatorial Guinea' },
+  { value: 'ER', label: 'Eritrea' },
+  { value: 'EE', label: 'Estonia' },
+  { value: 'ET', label: 'Ethiopia' },
+  { value: 'FK', label: 'Falkland Islands (Malvinas)' },
+  { value: 'FO', label: 'Faroe Islands' },
+  { value: 'FJ', label: 'Fiji' },
+  { value: 'FI', label: 'Finland' },
+  { value: 'FR', label: 'France' },
+  { value: 'GF', label: 'French Guiana' },
+  { value: 'PF', label: 'French Polynesia' },
+  { value: 'TF', label: 'French Southern Territories' },
+  { value: 'GA', label: 'Gabon' },
+  { value: 'GM', label: 'Gambia' },
+  { value: 'GE', label: 'Georgia' },
+  { value: 'DE', label: 'Germany' },
+  { value: 'GH', label: 'Ghana' },
+  { value: 'GI', label: 'Gibraltar' },
+  { value: 'GR', label: 'Greece' },
+  { value: 'GL', label: 'Greenland' },
+  { value: 'GD', label: 'Grenada' },
+  { value: 'GP', label: 'Guadeloupe' },
+  { value: 'GU', label: 'Guam' },
+  { value: 'GT', label: 'Guatemala' },
+  { value: 'GG', label: 'Guernsey' },
+  { value: 'GN', label: 'Guinea' },
+  { value: 'GW', label: 'Guinea-bissau' },
+  { value: 'GY', label: 'Guyana' },
+  { value: 'HT', label: 'Haiti' },
+  { value: 'HM', label: 'Heard Island and Mcdonald Islands' },
+  { value: 'VA', label: 'Holy See (Vatican City State)' },
+  { value: 'HN', label: 'Honduras' },
+  { value: 'HK', label: 'Hong Kong' },
+  { value: 'HU', label: 'Hungary' },
+  { value: 'IS', label: 'Iceland' },
+  { value: 'IN', label: 'India' },
+  { value: 'ID', label: 'Indonesia' },
+  { value: 'IR', label: 'Iran, Islamic Republic of' },
+  { value: 'IQ', label: 'Iraq' },
+  { value: 'IE', label: 'Ireland' },
+  { value: 'IM', label: 'Isle of Man' },
+  { value: 'IL', label: 'Israel' },
+  { value: 'IT', label: 'Italy' },
+  { value: 'JM', label: 'Jamaica' },
+  { value: 'JP', label: 'Japan' },
+  { value: 'JE', label: 'Jersey' },
+  { value: 'JO', label: 'Jordan' },
+  { value: 'KZ', label: 'Kazakhstan' },
+  { value: 'KE', label: 'Kenya' },
+  { value: 'KI', label: 'Kiribati' },
+  { value: 'KP', label: "Korea, Democratic People's Republic of" },
+  { value: 'KR', label: 'Korea, Republic of' },
+  { value: 'KW', label: 'Kuwait' },
+  { value: 'KG', label: 'Kyrgyzstan' },
+  { value: 'LA', label: "Lao People's Democratic Republic" },
+  { value: 'LV', label: 'Latvia' },
+  { value: 'LB', label: 'Lebanon' },
+  { value: 'LS', label: 'Lesotho' },
+  { value: 'LR', label: 'Liberia' },
+  { value: 'LY', label: 'Libyan Arab Jamahiriya' },
+  { value: 'LI', label: 'Liechtenstein' },
+  { value: 'LT', label: 'Lithuania' },
+  { value: 'LU', label: 'Luxembourg' },
+  { value: 'MO', label: 'Macao' },
+  { value: 'MK', label: 'Macedonia, The Former Yugoslav Republic of' },
+  { value: 'MG', label: 'Madagascar' },
+  { value: 'MW', label: 'Malawi' },
+  { value: 'MY', label: 'Malaysia' },
+  { value: 'MV', label: 'Maldives' },
+  { value: 'ML', label: 'Mali' },
+  { value: 'MT', label: 'Malta' },
+  { value: 'MH', label: 'Marshall Islands' },
+  { value: 'MQ', label: 'Martinique' },
+  { value: 'MR', label: 'Mauritania' },
+  { value: 'MU', label: 'Mauritius' },
+  { value: 'YT', label: 'Mayotte' },
+  { value: 'MX', label: 'Mexico' },
+  { value: 'FM', label: 'Micronesia, Federated States of' },
+  { value: 'MD', label: 'Moldova, Republic of' },
+  { value: 'MC', label: 'Monaco' },
+  { value: 'MN', label: 'Mongolia' },
+  { value: 'ME', label: 'Montenegro' },
+  { value: 'MS', label: 'Montserrat' },
+  { value: 'MA', label: 'Morocco' },
+  { value: 'MZ', label: 'Mozambique' },
+  { value: 'MM', label: 'Myanmar' },
+  { value: 'NA', label: 'Namibia' },
+  { value: 'NR', label: 'Nauru' },
+  { value: 'NP', label: 'Nepal' },
+  { value: 'NL', label: 'Netherlands' },
+  { value: 'AN', label: 'Netherlands Antilles' },
+  { value: 'NC', label: 'New Caledonia' },
+  { value: 'NZ', label: 'New Zealand' },
+  { value: 'NI', label: 'Nicaragua' },
+  { value: 'NE', label: 'Niger' },
+  { value: 'NG', label: 'Nigeria' },
+  { value: 'NU', label: 'Niue' },
+  { value: 'NF', label: 'Norfolk Island' },
+  { value: 'MP', label: 'Northern Mariana Islands' },
+  { value: 'NO', label: 'Norway' },
+  { value: 'OM', label: 'Oman' },
+  { value: 'PK', label: 'Pakistan' },
+  { value: 'PW', label: 'Palau' },
+  { value: 'PS', label: 'Palestinian Territory, Occupied' },
+  { value: 'PA', label: 'Panama' },
+  { value: 'PG', label: 'Papua New Guinea' },
+  { value: 'PY', label: 'Paraguay' },
+  { value: 'PE', label: 'Peru' },
+  { value: 'PH', label: 'Philippines' },
+  { value: 'PN', label: 'Pitcairn' },
+  { value: 'PL', label: 'Poland' },
+  { value: 'PT', label: 'Portugal' },
+  { value: 'PR', label: 'Puerto Rico' },
+  { value: 'QA', label: 'Qatar' },
+  { value: 'RE', label: 'Reunion' },
+  { value: 'RO', label: 'Romania' },
+  { value: 'RU', label: 'Russian Federation' },
+  { value: 'RW', label: 'Rwanda' },
+  { value: 'SH', label: 'Saint Helena' },
+  { value: 'KN', label: 'Saint Kitts and Nevis' },
+  { value: 'LC', label: 'Saint Lucia' },
+  { value: 'PM', label: 'Saint Pierre and Miquelon' },
+  { value: 'VC', label: 'Saint Vincent and The Grenadines' },
+  { value: 'WS', label: 'Samoa' },
+  { value: 'SM', label: 'San Marino' },
+  { value: 'ST', label: 'Sao Tome and Principe' },
+  { value: 'SA', label: 'Saudi Arabia' },
+  { value: 'SN', label: 'Senegal' },
+  { value: 'RS', label: 'Serbia' },
+  { value: 'SC', label: 'Seychelles' },
+  { value: 'SL', label: 'Sierra Leone' },
+  { value: 'SG', label: 'Singapore' },
+  { value: 'SK', label: 'Slovakia' },
+  { value: 'SI', label: 'Slovenia' },
+  { value: 'SB', label: 'Solomon Islands' },
+  { value: 'SO', label: 'Somalia' },
+  { value: 'ZA', label: 'South Africa' },
+  { value: 'GS', label: 'South Georgia and The South Sandwich Islands' },
+  { value: 'ES', label: 'Spain' },
+  { value: 'LK', label: 'Sri Lanka' },
+  { value: 'SD', label: 'Sudan' },
+  { value: 'SR', label: 'Suriname' },
+  { value: 'SJ', label: 'Svalbard and Jan Mayen' },
+  { value: 'SZ', label: 'Swaziland' },
+  { value: 'SE', label: 'Sweden' },
+  { value: 'CH', label: 'Switzerland' },
+  { value: 'SY', label: 'Syrian Arab Republic' },
+  { value: 'TW', label: 'Taiwan, Province of China' },
+  { value: 'TJ', label: 'Tajikistan' },
+  { value: 'TZ', label: 'Tanzania, United Republic of' },
+  { value: 'TH', label: 'Thailand' },
+  { value: 'TL', label: 'Timor-leste' },
+  { value: 'TG', label: 'Togo' },
+  { value: 'TK', label: 'Tokelau' },
+  { value: 'TO', label: 'Tonga' },
+  { value: 'TT', label: 'Trinidad and Tobago' },
+  { value: 'TN', label: 'Tunisia' },
+  { value: 'TR', label: 'Turkey' },
+  { value: 'TM', label: 'Turkmenistan' },
+  { value: 'TC', label: 'Turks and Caicos Islands' },
+  { value: 'TV', label: 'Tuvalu' },
+  { value: 'UG', label: 'Uganda' },
+  { value: 'UA', label: 'Ukraine' },
+  { value: 'AE', label: 'United Arab Emirates' },
+  { value: 'GB', label: 'United Kingdom' },
+  { value: 'US', label: 'United States' },
+  { value: 'UM', label: 'United States Minor Outlying Islands' },
+  { value: 'UY', label: 'Uruguay' },
+  { value: 'UZ', label: 'Uzbekistan' },
+  { value: 'VU', label: 'Vanuatu' },
+  { value: 'VE', label: 'Venezuela' },
+  { value: 'VN', label: 'Viet Nam' },
+  { value: 'VG', label: 'Virgin Islands, British' },
+  { value: 'VI', label: 'Virgin Islands, U.S.' },
+  { value: 'WF', label: 'Wallis and Futuna' },
+  { value: 'EH', label: 'Western Sahara' },
+  { value: 'YE', label: 'Yemen' },
+  { value: 'ZM', label: 'Zambia' },
+  { value: 'ZW', label: 'Zimbabwe' },
+]
+
+export const books: {
+  title: string
+  author: { firstName: string; lastName: string }
+}[] = [
+  {
+    title: "Old Man's War",
+    author: {
+      firstName: 'John',
+      lastName: 'Scalzi',
+    },
+  },
+  {
+    title: 'The Lock Artist',
+    author: {
+      firstName: 'Steve',
+      lastName: 'Hamilton',
+    },
+  },
+  {
+    title: 'HTML5',
+    author: {
+      firstName: 'Remy',
+      lastName: 'Sharp',
+    },
+  },
+  {
+    title: 'Right Ho Jeeves',
+    author: {
+      firstName: 'P.D',
+      lastName: 'Woodhouse',
+    },
+  },
+  {
+    title: 'The Code of the Wooster',
+    author: {
+      firstName: 'P.D',
+      lastName: 'Woodhouse',
+    },
+  },
+  {
+    title: 'Thank You Jeeves',
+    author: {
+      firstName: 'P.D',
+      lastName: 'Woodhouse',
+    },
+  },
+  {
+    title: 'The DaVinci Code',
+    author: {
+      firstName: 'Dan',
+      lastName: 'Brown',
+    },
+  },
+  {
+    title: 'Angels & Demons',
+    author: {
+      firstName: 'Dan',
+      lastName: 'Brown',
+    },
+  },
+  {
+    title: 'The Silmarillion',
+    author: {
+      firstName: 'J.R.R',
+      lastName: 'Tolkien',
+    },
+  },
+  {
+    title: 'Syrup',
+    author: {
+      firstName: 'Max',
+      lastName: 'Barry',
+    },
+  },
+  {
+    title: 'The Lost Symbol',
+    author: {
+      firstName: 'Dan',
+      lastName: 'Brown',
+    },
+  },
+  {
+    title: 'The Book of Lies',
+    author: {
+      firstName: 'Brad',
+      lastName: 'Meltzer',
+    },
+  },
+  {
+    title: 'Lamb',
+    author: {
+      firstName: 'Christopher',
+      lastName: 'Moore',
+    },
+  },
+  {
+    title: 'Fool',
+    author: {
+      firstName: 'Christopher',
+      lastName: 'Moore',
+    },
+  },
+  {
+    title: 'Incompetence',
+    author: {
+      firstName: 'Rob',
+      lastName: 'Grant',
+    },
+  },
+  {
+    title: 'Fat',
+    author: {
+      firstName: 'Rob',
+      lastName: 'Grant',
+    },
+  },
+  {
+    title: 'Colony',
+    author: {
+      firstName: 'Rob',
+      lastName: 'Grant',
+    },
+  },
+  {
+    title: 'Backwards, Red Dwarf',
+    author: {
+      firstName: 'Rob',
+      lastName: 'Grant',
+    },
+  },
+  {
+    title: 'The Grand Design',
+    author: {
+      firstName: 'Stephen',
+      lastName: 'Hawking',
+    },
+  },
+  {
+    title: 'The Book of Samson',
+    author: {
+      firstName: 'David',
+      lastName: 'Maine',
+    },
+  },
+  {
+    title: 'The Preservationist',
+    author: {
+      firstName: 'David',
+      lastName: 'Maine',
+    },
+  },
+  {
+    title: 'Fallen',
+    author: {
+      firstName: 'David',
+      lastName: 'Maine',
+    },
+  },
+  {
+    title: 'Monster 1959',
+    author: {
+      firstName: 'David',
+      lastName: 'Maine',
+    },
+  },
+]
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1cb52a8..893d5a1 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -26,9 +26,9 @@ importers:
       '@vitejs/plugin-vue':
         specifier: ^5.0.4
         version: 5.0.4(vite@5.2.3)(vue@3.4.21)
-      '@vitest/coverage-c8':
-        specifier: ^0.33.0
-        version: 0.33.0(vitest@1.4.0)
+      '@vitest/coverage-v8':
+        specifier: ^1.4.0
+        version: 1.4.0(vitest@1.4.0)
       '@vue/eslint-config-prettier':
         specifier: ^9.0.0
         version: 9.0.0(eslint@8.57.0)(prettier@3.2.5)
@@ -81,7 +81,7 @@ importers:
         specifier: ^5.4.3
         version: 5.4.3
       vite:
-        specifier: ^5.2.2
+        specifier: ^5.2.3
         version: 5.2.3(@types/node@20.11.30)
       vitest:
         specifier: ^1.4.0
@@ -2947,18 +2947,28 @@ packages:
       vue: 3.4.21(typescript@5.4.3)
     dev: true
 
-  /@vitest/coverage-c8@0.33.0(vitest@1.4.0):
-    resolution: {integrity: sha512-DaF1zJz4dcOZS4k/neiQJokmOWqsGXwhthfmUdPGorXIQHjdPvV6JQSYhQDI41MyI8c+IieQUdIDs5XAMHtDDw==}
-    deprecated: v8 coverage is moved to @vitest/coverage-v8 package
+  /@vitest/coverage-v8@1.4.0(vitest@1.4.0):
+    resolution: {integrity: sha512-4hDGyH1SvKpgZnIByr9LhGgCEuF9DKM34IBLCC/fVfy24Z3+PZ+Ii9hsVBsHvY1umM1aGPEjceRkzxCfcQ10wg==}
     peerDependencies:
-      vitest: '>=0.30.0 <1'
+      vitest: 1.4.0
     dependencies:
       '@ampproject/remapping': 2.3.0
-      c8: 7.14.0
+      '@bcoe/v8-coverage': 0.2.3
+      debug: 4.3.4
+      istanbul-lib-coverage: 3.2.2
+      istanbul-lib-report: 3.0.1
+      istanbul-lib-source-maps: 5.0.4
+      istanbul-reports: 3.1.7
       magic-string: 0.30.8
+      magicast: 0.3.3
       picocolors: 1.0.0
       std-env: 3.7.0
+      strip-literal: 2.0.0
+      test-exclude: 6.0.0
+      v8-to-istanbul: 9.2.0
       vitest: 1.4.0(@types/node@20.11.30)(jsdom@24.0.0)
+    transitivePeerDependencies:
+      - supports-color
     dev: true
 
   /@vitest/expect@1.4.0:
@@ -3918,25 +3928,6 @@ packages:
       rc9: 2.1.1
     dev: true
 
-  /c8@7.14.0:
-    resolution: {integrity: sha512-i04rtkkcNcCf7zsQcSv/T9EbUn4RXQ6mropeMcjFOsQXQ0iGLAr/xT6TImQg4+U9hmNpN9XdvPkjUL1IzbgxJw==}
-    engines: {node: '>=10.12.0'}
-    hasBin: true
-    dependencies:
-      '@bcoe/v8-coverage': 0.2.3
-      '@istanbuljs/schema': 0.1.3
-      find-up: 5.0.0
-      foreground-child: 2.0.0
-      istanbul-lib-coverage: 3.2.2
-      istanbul-lib-report: 3.0.1
-      istanbul-reports: 3.1.7
-      rimraf: 3.0.2
-      test-exclude: 6.0.0
-      v8-to-istanbul: 9.2.0
-      yargs: 16.2.0
-      yargs-parser: 20.2.9
-    dev: true
-
   /cac@6.7.14:
     resolution: {integrity: sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==}
     engines: {node: '>=8'}
@@ -5519,14 +5510,6 @@ packages:
         optional: true
     dev: true
 
-  /foreground-child@2.0.0:
-    resolution: {integrity: sha512-dCIq9FpEcyQyXKCkyzmlPTFNgrCzPudOe+mhvJU5zAtlBnGVy2yKxtfsxK2tQBThwq225jcvBjpw1Gr40uzZCA==}
-    engines: {node: '>=8.0.0'}
-    dependencies:
-      cross-spawn: 7.0.3
-      signal-exit: 3.0.7
-    dev: true
-
   /foreground-child@3.1.1:
     resolution: {integrity: sha512-TMKDUnIte6bfb5nWv7V/caI169OHgvwjb7V4WkeUvbQQdjr5rWKqHFiKWb/fcOwB+CzBT+qbWjvj+DVwRskpIg==}
     engines: {node: '>=14'}
@@ -6544,6 +6527,17 @@ packages:
       supports-color: 7.2.0
     dev: true
 
+  /istanbul-lib-source-maps@5.0.4:
+    resolution: {integrity: sha512-wHOoEsNJTVltaJp8eVkm8w+GVkVNHT2YDYo53YdzQEL2gWm1hBX5cGFR9hQJtuGLebidVX7et3+dmDZrmclduw==}
+    engines: {node: '>=10'}
+    dependencies:
+      '@jridgewell/trace-mapping': 0.3.25
+      debug: 4.3.4
+      istanbul-lib-coverage: 3.2.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /istanbul-reports@3.1.7:
     resolution: {integrity: sha512-BewmUXImeuRk2YY0PVbxgKAysvhRPUQE0h5QRM++nVWyubKGV0l8qQ5op8+B2DOmwSe63Jivj0BjkPQVf8fP5g==}
     engines: {node: '>=8'}
diff --git a/vite.config.ts b/vite.config.ts
index 68db98d..4b2a728 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -12,6 +12,7 @@ export default defineConfig({
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url)),
       '@tests': fileURLToPath(new URL('./tests', import.meta.url)),
+      '@docs': fileURLToPath(new URL('./docs', import.meta.url)),
     },
   },
   build: {