Vue - Feathers.js realtime chat app populate messages

I am building a chat app using feathers.js as backend and Vue as a frontend. Everything seem to be working well so far. it connects to mongoose DB and the message that I send in the chat app is stored in DB. issue that I have is that I want to populate all the messages in realtime but it only does so when I refresh the browser.

I put the function that populates messages in "mounted" but it didn't work

    <template>
    <v-container fluid>
        <v-slide-y-transition mode="out-in">
        <v-card class="pl-3 pr-3 pt-3 mt-3 ml-3 mr-3">
            <v-text-field v-model="text"></v-text-field>
            <v-btn class="primary" @click="saveText">Save</v-btn>
            <v-list>
            <v-list-tile v-for="msg in messages.data" :key="msg.id">
                <v-list-tile-content>
                <v-list-tile-title>{{msg.text}}</v-list-tile-title>
                <v-list-tile-sub-title>Created at: {{new Date (msg.createdAt).toString ()}}</v-list-tile-sub-title>
                </v-list-tile-content>
            </v-list-tile>
            </v-list>
        </v-card>
        </v-slide-y-transition>
    </v-container>
    </template>

    <script>
    import feathers from "../feathers-client";

    const messageService = feathers.service("messages");

    export default {
    name: "chat",
    data() {
        return {
        text: "",
        messages: []
        };
    },

    async mounted() {
        this.messages = await messageService.find();
        messageService.on("created", message => this.messages.data.push(message));
    },

    methods: {
        saveText() {
        messageService
            .create({ text: this.text })
            .then(res => {
            console.log("Message created correctly");
            })
            .catch(err => {
            console.error(err.message);
            });
        }
    }
    };
    </script>

I expect the messages populates automatically