Function to check if inertia prop is set not working

Hello, I have a function that I want to use to check & see if my nested (multi-dim) "flash" array has values set for any of the nested objects. This is what I have coded:

function isMessageVisible() {
    // if there is a message in the flash store, return true
    // do this for each of the flash messages variants
    if (this.$page.props.flash.success || this.$page.props.flash.error || this.$page.props.flash.warning || this.$page.props.flash.info) {
        console.log("message is visible");
        return true;
    } else {
        console.log("message is not visible");
        return false;
    }
}

Then I use this function to check show my flash component, as follows

    <FlashMessage :flash="$page.props.flash" v-if="isMessageVisible"/>

However, there is an issue with this function, as it is not console logging anything & obviously preventing the flash messages from showing.

In the vue project I created that I pulled this from I used Pinia, but I don't think I need to worry about using Pinia here (I could be wrong, maybe it would be useful?) - I would just like a solution to return an actual boolean value so I can dynamically render the <FlashMessage /> component.

Thanks for your help!