CSS transitions don't work

[TenglErata]

Code Store (used Pinia):

const userName = 'Laserhawk'
let chats = reactive({})

function connectToServer() {
        socket.on('connect',() => {
            socket.emit('sendConnectionData', userName)
            getChat('Default')

            socket.on('getRoomUsers', async data => {
                Object.assign(chats, data)
                nextTick()
            })

            socket.on('getRoomContent', data => {
                current.chatContent = data
            })
        })
    }

Code of component:

<template>
 <div class="list">
     <div :class="room.includes(store.userName) ? 'list-chat border' : 'list-chat'"
          v-for="(room, roomName) in store.chats" :key="room">
       <div class="chat-info" @dblclick="store.getChat(roomName)">
         <label class="chat-name">{{ roomName }}</label>
         <label class="chat-numbers">{{ room.length }}</label>
       </div>
       <div class="chat-users">
         <div class="user" v-for="user in room">
           <div class="user-info">
             <div class="is_speaking"></div>
             <label class="username">{{ user }}</label>
           </div>
         </div>
       </div>
     </div>
 </div>
</template>

<script setup>
  import {useStore} from "@/stores/store";
  const store = useStore()
</script>

<style scoped>
  .list {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: .5rem;
  }

  .list-chat {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    border-radius: .5rem;
    border: 1px solid transparent;
    transition: border-color .4s
  }
  .border {
    border-color: red
  }
....

Everything works, chats are updated. The component works correctly, but the transition does not work.
Please help me figure it out, nothing helps anymore

[LinusBorg]

Works fine in this simplified example.

So you need to start a little debugging:

• is the border class being applied when you expect it to?
• Is the border class applied directly on first render? then there will be no transition, as there is no previous state to transition from.

[TenglErata]

Hello.
When I wait... I don’t really understand, but this way the border is always drawn correctly, both during the initial launch of the program and during reactive changes to the lists.

I debugged my code according to my skills. if you use a local array of chats and, when double-clicking, add the desired name to the list so that the border is drawn, then it is drawn with transition. I think that the problem is in some kind of interaction with the server, but everything else works correctly, namely the moment with the transition - no

[TenglErata]

The problem was solved by restarting the computer.