[Vuejs]-Hover on dynamic generated span and give the hovered icon active class in Vue

Try this, store the currently hovered note and use that to also add the active class.

<template>
    <div class="track-rating">
       <span :key="note" 
              v-for="note in maxNotes" 
             :class="{ 'active': note <= notes || note <= hoveredNote }" 
             @mouseover="hoveredNote = note"  
             @mouseleave="hoveredNote = false" 
             @click="rate(note)" class="material-icons mr-1">
        audiotrack
       </span>
    </div>
  </template>
  <script>
    export default {
      name: "Rating",
      props: {
        rating: {
            type: Number,
            required: true
        },
        maxNotes: {
            type: Number,
            default: 3
        },
        hasCounter: {
            type: Boolean,
            default: true
        }
      },
      data() {
        return {
            notes: this.rating,
            hoveredNote: false,
        };
      },
      methods: {
        rate(note) {
            if (typeof note === 'number' && note <= this.maxNotes && note >= 0)
                this.notes = this.notes === note ? note - 1 : note
        }
      }
   };
 </script>