I am implementing agora chat in vue js where there is object which emits 6 events. How can I listen to those in VUE JS. Here is its code in core javascript:

       this.agora.conn = new AC.connection({
            appKey: this.agora.appKey,
        });


       this.agora.conn.addEventHandler("connection&message", {
            // Occurs when the app is connected to Agora Chat.
            onConnected: () => {
                console.log("App connected.");
            },
            // Occurs when the app is disconnected from Agora Chat.
            onDisconnected: () => {
                console.log("App disconnected.")
            },
            // Occurs when a text message is received.
            onTextMessage: (message) => {
                console.log("Message Recieved: ",message);
            },
            // Occurs when the token is about to expire.
            onTokenWillExpire: (params) => {
                console.log("Token is about to expire. ",params)
                this.refreshToken(this.agora.username, this.agora.password);
            },
            // Occurs when the token has expired. You need to get a token from your app server to log in to Agora Chat.
            onTokenExpired: (params) => {
                console.log("Token is expired. ",params)
                this.refreshToken(this.agora.username, this.agora.password);
            },
            onError: (error) => {
                console.log("on error: ", error);
            },
        });

Here agora is the data member in the component and this above code is in mounted hook. I have noticed console the SDK is dispatching the events but this listener is not catching any. Here is agora data member:

agora : {
         baseUrl : "https://a41.chat.agora.io",
         appKey : "******",
         username : "fana",
         password: "123",
         conn : null
         }