Может ли кто-нибудь сказать мне, почему моя функция "непрочитанных сообщений" не работает?

Question

В моем окне чата, когда я нажимаю на контакт, «уведомление о новом сообщении» должно исчезнуть, чего не происходит.
Он показывает количество новых сообщений, но не go далеко
Новые сообщения продолжают добавляться в этом уведомлении.
Я использую Sqlite.
Возможно, функция down в add_read_to_message_table не работает.
Я знаю, что здесь слишком много кодов, но я не могу понять проблему, и он также не показывает никаких ошибок

Вот мой ContactsListController: -

public function index()
    {
        return view('home');
    }

    public function get(){
        $sem = Auth::user()->id;
        $contacts = DB::table('friends')
    ->where('my_id', $sem)
    ->get();


     // get a collection of items where sender_id is the user who sent us a message
        // and messages_count is the number of unread messages we have from him
        $unreadIds = Message::select(\DB::raw('`from` as sender_id, count(`from`) as messages_count'))
            ->where('to', auth()->id())
            ->where('read', false)
            ->groupBy('from')
            ->get();

            // add an unread key to each contact with the count of unread messages
        $contacts = $contacts->map(function($contact) use ($unreadIds) {
            $contactUnread = $unreadIds->where('sender_id', $contact->friends_id)->first();

            $contact->unread = $contactUnread ? $contactUnread->messages_count : 0;

            return $contact;
        });

    return response()->json($contacts);
}

Вот моя модель сообщения: -

class Message extends Model
{

    protected $fillable = ['from', 'to', 'text'];

     public function fromContact()
    {
        return $this->hasOne(User::class, 'id', 'from');
    }
}

Вот таблица моих друзей: -

public function up()
    {
        Schema::create('friends', function (Blueprint $table) {
            $table->id();
            $table->string('created_by');
        $table->string('my_id');
        $table->string('friends_id');
        $table->string('name');     
            $table->timestamps();
        });
    }

Вот моя таблица сообщений: -

public function up()
    {
        Schema::create('messages', function (Blueprint $table) {
            $table->id();
        $table->integer('from')->unsigned();
        $table->integer('to')->unsigned();
        $table->text('text');       
            $table->timestamps();
        });
    }

Вот моя _add_read_to_messages_table: -

class AddReadToMessages extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::table('messages', function (Blueprint $table) {
            $table->boolean('read')->after('to')->default(false);
                    });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::table('messages', function (Blueprint $table) {
            $table->dropColumn('read');
                    });
    }
}

Вот My ChatApp. vue: -

<template>
    <div class="chat-app">
        <Conversation :contact="selectedContact" :messages="messages" @new="saveNewMessage"/>
        <ContactsList :contacts="contacts" @selected="startConversationWith"/>
    </div>
</template>

<script>
    import Conversation from './Conversation';
    import ContactsList from './ContactsList';

    export default {
        props: {
            user: {
                type: Object,
                required: true
            }
        },
        data() {
            return {
                selectedContact: null,
                messages: [],
                contacts: []
            };
        },
        mounted() {
            Echo.private(`messages.${this.user.id}`)
                .listen('NewMessage', (e) => {
                    this.hanleIncoming(e.message);
                });

            axios.get('/contacts')
                .then((response) => {
                    this.contacts = response.data;
                });
        },
        methods: {
            startConversationWith(contact) {
                this.updateUnreadCount(contact, true);

                axios.get(`/conversation/${contact.friends_id}`)
                    .then((response) => {
                        this.messages = response.data;
                        this.selectedContact = contact;
                    })
            },
            saveNewMessage(message) {
                this.messages.push(message);
            },
            hanleIncoming(message) {
                if (this.selectedContact && message.from == this.selectedContact.friends_id) {
                    this.saveNewMessage(message);
                    return;
                }

                this.updateUnreadCount(message.from_contact, false);
            },
            updateUnreadCount(contact, reset) {
                this.contacts = this.contacts.map((single) => {
                    if (single.id !== contact.friends_id) {
                        return single;
                    }

                    if (reset)
                        single.unread = 0;
                    else
                        single.unread += 1;

                    return single;
                })
            }
        },
        components: {Conversation, ContactsList}
    }
</script>


<style lang="scss" scoped>
.chat-app {
    display: flex;
}
</style>

Вот мой список контактов. vue: -

<template>
    <div class="contacts-list">
        <ul>
            <li v-for="contact in sortedContacts" :key="contact.friends_id" @click="selectContact(contact)" :class="{ 'selected': contact == selected }">

                <div class="contact">
                    <h3 class="name">{{ contact.name }}</h3>
                    <a v-bind:href="'/report/' + contact.friends_id">report</a>

                </div>
                <span class="unread" v-if="contact.unread">{{ contact.unread }}</span>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        props: {
            contacts: {
                type: Array,
                default: []
            }
        },
        data() {
            return {
                selected: this.contacts.length ? this.contacts[0] : null
            };
        },
        methods: {
            selectContact(contact) {
                this.selected = contact;

                this.$emit('selected', contact);
            }
        },
        computed: {
            sortedContacts() {
                return _.sortBy(this.contacts, [(contact) => {
                    if (contact == this.selected) {
                        return Infinity;
                    }

                    return contact.unread;
                }]).reverse();
            }
        }
    }
</script>

<style lang="scss" scoped>
.contacts-list {
    flex: 2;
    max-height: 100%;
    height: 600px;
    overflow: scroll;
    border-left: 1px solid #a6a6a6;

    ul {
        list-style-type: none;
        padding-left: 0;

        li {
            display: flex;
            padding: 2px;
            border-bottom: 1px solid #aaaaaa;
            height: 80px;
            position: relative;
            cursor: pointer;

            &.selected {
                background: #dfdfdf;
            }

            span.unread {
                background: #82e0a8;
                color: #fff;
                position: absolute;
                right: 11px;
                top: 20px;
                display: flex;
                font-weight: 700;
                min-width: 20px;
                justify-content: center;
                align-items: center;
                line-height: 20px;
                font-size: 12px;
                padding: 0 4px;
                border-radius: 3px;
            }

            .avatar {
                flex: 1;
                display: flex;
                align-items: center;

                img {
                    width: 35px;
                    border-radius: 50%;
                    margin: 0 auto;
                }
            }

            .contact {
                flex: 3;
                font-size: 10px;
                overflow: hidden;
                display: flex;
                flex-direction: column;
                justify-content: center;

                p {
                    margin: 0;

                    &.name {
                        font-weight: bold;
                    }
                }
            }
        }
    }
}
</style>

Я очень долго сталкивался с этой проблемой, это действительно помогите, если вы можете помочь мне разобраться в проблеме