q-list : icons color go funny

[yeechutngeow]

Refer to the diagram below - why is there an odd one out in color blue? I have noticed that the blue color comes and go as I add/remove items to the list.

It is in a layout page, given fully below.

<template>
  <q-layout view="lHh lpR fFf" style="max-width:600px">
    <q-header elevated class="bg-primary text-white">
      <q-toolbar>
        <q-btn dense flat round icon="menu" @click="left = !left" />
        <q-toolbar-title class="text-h6">
          Client Management System
        </q-toolbar-title>
        <div></div>
      </q-toolbar>
    </q-header>
    <q-drawer show-if-above v-model="left" side="left" bordered>
      <q-list class="q-pt-md text-weight-bold">
        <q-item clickable v-ripple to="/package/list">
          <q-item-section avatar>
            <q-icon name="list_alt" size="md" />
          </q-item-section>
          <q-item-section>Packages</q-item-section>
        </q-item>
        <q-item clickable v-ripple to="/client/list">
          <q-item-section avatar>
            <q-icon name="people" size="md" />
          </q-item-section>
          <q-item-section>Clients</q-item-section>
        </q-item>
        <q-item clickable v-ripple to="/settings">
          <q-item-section avatar>
            <q-icon name="settings" size="md" />
          </q-item-section>
          <q-item-section>Settings
          </q-item-section>
        </q-item>

        <q-item clickable v-ripple @click="logout" to="/">
          <q-item-section avatar>
            <q-icon name="logout" size="md" />
          </q-item-section>
          <q-item-section class="text-weight-bold">Logout</q-item-section>
        </q-item>
      </q-list>
    </q-drawer>
    <q-page-container>
      <router-view :user-email='authStore.email' />
    </q-page-container>
  </q-layout>
</template>

<script setup>
import { getAuth, signOut } from 'firebase/auth';
import { ref } from 'vue'
import { useAuthStore } from 'stores/auth'

const auth = getAuth();
const left = ref(false);
const authStore = useAuthStore();

function logout() {
  auth.signOut();
}
</script>

[suleimanas]

this is the expected behavior
see https://quasar.dev/vue-components/list-and-list-items#connecting-to-vue-router
also see in the same page (the Navigation tab in QItem API) https://quasar.dev/vue-components/list-and-list-items#qitem-api