I'm working with drag-and-drop in my application, in this case I can drag users to different projects in a list.

Now i'm styling the UI and I want to colour the background of my item-list, but it doesn't really work. When I drag the item over <v-list-item-avatar> or <v-list-item-title> the background of the list-item does not change its colour. Only by dragging over <v-list-item> . So it's a little bit buggy.

I tried different approaches, but none of them were helpful. How can I optimize the approach to get the expected result?

Vue-Snippet:

<v-list-item-group v-model="selectedProjectItem">
          <v-list-item
            @drop='onDrop($event, project)'
            @dragover.prevent
            @dragenter.prevent
            @dragenter="dragenter($event)"
            @dragleave="clearDrag($event)"
            v-for="(project, index) in visibleProjects"
            :key="project.id"
            link
            @click="emitAllUsers(project, index)"
            class="projectItemSize project"
            id="projectlist"
            >
          <v-list-item-avatar  size="35" class="avatar">
            <v-img v-bind:src="returnImage(project,project.image)" />
          </v-list-item-avatar>
          <v-list-item-title class="project">
            {{ project.name }}
          </v-list-item-title>
         </v-list-item>
 </v-list-item-group> 

And this is my method:

dragenter (evt) {
      const event = evt.target
      if (event.id === 'projectlist') {
        event.style.background = '#0061ff'
        event.style.color = 'white'
      }
    }

EDIT: The left picture below shows, that the background of the list-item have not changed, when dragging the item over the title.