Select items in v-for and set one item to default in selected array

I have a image selector component where the user can select multiple images from the server or upload multiple images. For the moment I'm working on the selecting existing images part, and the way it works is that the user searches for the image title and clicks on a card where the image is displayed to select it, but I also need to be able to take all the selected images and than select from there a default image.

My question is how would you do that? I'm not sure what is the best way since the user clicks on the images to pick them, I'm unsure what would be the least confusing for the user.

This is my code

<div class="row" v-if="!add_image">
    <div class="col-6">
	    <div class="input-group">
		    <input type="text" v-model="search" />
			<div class="input-group-append">
                <button @click="handleSearch()">
			         Search
			    </button>
		    </div>
	    </div>
	</div>
    <div class="col-6"></div>
</div>

<div v-for="(img, index) in images" :key="index">
    <div @click="handleImg(img.id)" v-bind:class="selectedImage(img.id)">
        <img :src="getImg(img.id)"/>
        <p>{{ img.alt }}</p>
    </div>
</div>

//data
upload: { image_id: [], image: [] },
images: [],

//methods in script
selectedImage(id) {
    if (this.upload.image_id.includes(id)) return 'selected_img';
},
handleImg: function (id) {
    if (this.upload.image_id.includes(id)) {
        this.upload.image_id.splice(this.upload.image_id.indexOf(id), 1);
    } else {
        this.upload.image_id.push(id);
    }
},
//the handleSearch() is quite long and really not important in this case so I will omit it, if it's needed I will gladly add it

When the images get selected the card they are in turns a different color to signify it's been selected.