Can't Select Customized Combobox Items (Vuetify) - vue.js

Question

Two problems that I'm having with Vuetify's combobox:
Input is cleared on blur (combobox not focused on) and I don't want this. This doesn't happen if I don't customize how my items look with v-slot:item though.
Can't select any of the items when I'm trying to customize my items with v-slot:item, but I can select them if I don't customize the items.
I don't know what I'm doing wrong when I basically just copied straight from the documentation and adjusted it to my needs.
<v-combobox
#focus="isShaped = true"
#blur="isShaped = false"
v-model="card_name"
:loading="isLoading"
:items="cards"
hide-no-data
prepend-inner-icon="mdi-magnify"
append-icon=""
outlined rounded :shaped="isShaped"
label="Search for a card"
:search-input.sync="search"
item-text="name"
item-value="set_name"
>
<template v-slot:item="{ item }">
<v-list-item>
<v-list-item-content>
<v-list-item-title class="mb-2">{{item.name}}</v-list-item-title>
<v-list-item-subtitle>{{item.set_name}}</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
</template>
<template v-slot:selection="{ item }">
<span v-text="item.name"></span>
</template>
<template v-slot:progress>
<v-progress-circular
class="mt-3"
v-if="isLoading"
indeterminate
color="primary"
:width="2"
:size="30"
></v-progress-circular>
</template>
</v-combobox>
Here's the codepen: https://codepen.io/chataolauj/pen/RwwYxBg?editors=1010