I am just a beginner working on the note app which uses Laravel and Vue. And now I am having trouble trying to read the string value of an object returned by params from router.js and received by message inside props of MyIndex.vue. While the I think the object had been received, when alerting the user with toast, the "this.message.message" which is supposed to be the string value inside the object message is not readable by vue.

When I print out the "this.message" in toast, it alerts with [object Object]. But when I print out using "this.message.message" in toast, it do alert but without any message at all!

MyIndex.vue

import MyMaster from './Layout/MyMaster.vue';
import { useToast } from 'vue-toastification';
export default{
    name:'MyIndex',
    components: {MyMaster},
    props: { message: Object},
    created(){
        if(this.message){
            const toast = useToast();
            toast.info(this.message.message, {
                timeout: 2000,
            });
        }
    },
}

route.js

const ifAuth = (to, from, next) => {
const data = localStorage.getItem('auth');
if(data !== 'null'){
    const user = JSON.parse(data).user;
    return next({
        name:'index',
        params:{
            message: { type:'i', message: `${user.name} Already Logined!` }
        }
    })
}
return next();
}