I have a list of emails and some are grouped together by a conversation id. I am using v-list to display these emails and v-list-group for the ones that require the dropdown functionality for individual selection. I was hoping for each individual email to be selectable despite if its in the group or not. This is working as intended however, if I were to click an item multiple times its pushed to the v-model regardless of its its highlighted as a selection or not. This does not make sense considering you would most likely want the final selection not all the items that are clicked. Therefore, it makes me think I am doing this incorrectly:

    <v-list :disabled="selectedEmailLoading" v-model:opened="open" v-model:selected="selectedEmails" select-strategy="independent" color="primary" lines="two" item-props style="height: calc(100vh - 300px);">
      <template v-for="conversation in cleanFolder">
        <v-list-item v-if="conversation.length==1" v-for="email in conversation" class="rounded-lg py-5 my-2" :value="email" @click="loadEmail(conversation[0])">
          <template v-slot:prepend="{ isActive }">
            <v-list-item-action start>
              <v-avatar color="primaryLighten1">
                <span class="text-subtitle-1">{{email.from.email_address ? getStateAbbreviation(email.from.email_address) : ""}}</span>
              </v-avatar>
            </v-list-item-action>
          </template>
          <v-list-item-title class="d-flex justify-space-between mb-1">
            <div class="d-flex align-center" style="white-space: nowrap; word-break: normal; overflow: hidden; text-overflow: ellipsis;">
              {{ email.from.email_address }}
            </div>
            <div class="d-none d-md-flex align-center pl-5">
              <v-icon v-if="email.has_attachments" icon="mdi-paperclip" size="small"></v-icon>
            </div>
          </v-list-item-title>

          <v-list-item-subtitle class="d-flex justify-space-between">
            <div class="d-flex align-center" style="white-space: nowrap; word-break: normal; overflow: hidden; text-overflow: ellipsis;">
              {{ email.subject }}
            </div>
            <div class="d-none d-md-flex align-center pl-5 text-right" style="min-width:145px">
              {{ dayjs(email.received_date).format('MM/DD/YYYY h:mm A') }}
            </div>
          </v-list-item-subtitle>
          <v-list-item-subtitle>
            <div class="mt-2" v-html="email.body_preview">
            </div>
          </v-list-item-subtitle>
        </v-list-item>
        <v-list-group v-else :value="conversation">
          <template v-slot:activator="{ props }">
            <v-list-item
              v-bind="props"
            >
              <template v-slot:prepend="{ isActive }">
                <v-list-item-action start>
                  <v-avatar color="primaryLighten1">
                    <span class="text-subtitle-1">{{conversation[0].from.email_address ? getStateAbbreviation(conversation[0].from.email_address) : ""}}</span>
                  </v-avatar>
                </v-list-item-action>
              </template>
              <v-list-item-title class="d-flex justify-space-between mb-1">
                <div class="d-flex align-center" style="white-space: nowrap; word-break: normal; overflow: hidden; text-overflow: ellipsis;">
                  {{ conversation[0].from.email_address }}
                </div>
                <div class="d-none d-md-flex align-center pl-5">
                  <v-icon v-if="conversation[0].has_attachments" icon="mdi-paperclip" size="small"></v-icon>
                </div>
              </v-list-item-title>

              <v-list-item-subtitle class="d-flex justify-space-between">
                <div class="d-flex align-center" style="white-space: nowrap; word-break: normal; overflow: hidden; text-overflow: ellipsis;">
                  {{ conversation[0].subject }}
                </div>
                <div class="d-none d-md-flex align-center pl-5 text-right" style="min-width:145px">
                  {{ dayjs(conversation[0].received_date).format('MM/DD/YYYY h:mm A') }}
                </div>
              </v-list-item-subtitle>
              <v-list-item-subtitle>
                <div class="mt-2" v-html="conversation[0].body_preview">
                </div>
              </v-list-item-subtitle>
            </v-list-item>
          </template>
          <v-list-item v-for="email in conversation" class="rounded-lg py-5 my-2" :value="email" @click="loadEmail(email)">
            <template v-slot:prepend="{ isActive }">
              <v-list-item-action start>
                <v-avatar color="primaryLighten1">
                  <span class="text-subtitle-1">{{email.from.email_address ? getStateAbbreviation(email.from.email_address) : ""}}</span>
                </v-avatar>
              </v-list-item-action>
            </template>
            <v-list-item-title class="d-flex justify-space-between mb-1">
              <div class="d-flex align-center" style="white-space: nowrap; word-break: normal; overflow: hidden; text-overflow: ellipsis;">
                {{ email.from.email_address }}
              </div>
              <div class="d-none d-md-flex align-center pl-5">
                <v-icon v-if="email.has_attachments" icon="mdi-paperclip" size="small"></v-icon>
              </div>
            </v-list-item-title>

            <v-list-item-subtitle class="d-flex justify-space-between">
              <div class="d-flex align-center" style="white-space: nowrap; word-break: normal; overflow: hidden; text-overflow: ellipsis;">
                {{ email.subject }}
              </div>
              <div class="d-none d-md-flex align-center pl-5 text-right" style="min-width:145px">
                {{ dayjs(email.received_date).format('MM/DD/YYYY h:mm A') }}
              </div>
            </v-list-item-subtitle>
            <v-list-item-subtitle>
              <div class="mt-2" v-html="conversation[0].body_preview">
              </div>
            </v-list-item-subtitle>
          </v-list-item>
        </v-list-group>
      </template>
    </v-list>