Unable to return random Firestore document from collection

Question

I am building a web-app using Nuxt and am having a hard time trying to get a single random message from my messages collection in Firestore.

I have tried using a method to return a random message as well as just as randomizing an index value of the array in the messages object.

To better explain, this is what my current script tag looks like of my Messages.vue component:

<script>
import {db} from '../plugins/firebase'
    export default {
        firestore() {
            return {
                messages: db.collection("messages")
            }
        },
        data: function() {
            return {
                messages: ''
            }
        },
        methods: {
            randomMessage() {
                var randomMessage = this.messages[Math.floor(Math.random()*this.messages.length)];
                return randomMessage
            }
        }

    }
</script>

The randomMessage() method does return a random message object out of the collection, but it is the entire object and I just want the .text propery of message. In other words, {{messages[Math.floor(Math.random()*this.messages.length)]}}works in returning a random message document from Firestore, but when I use {{messages[Math.floor(Math.random()*this.messages.length)].text, I receive an error:

Cannot read property 'text' of undefined

I have also tried following Dan McGrath's answer in this thread without success:

Firestore: How to get random documents in a collection

I am not sure how to implement the Wrap-around solution in my Nuxt project. When I try to use that solution as a method in my script export, I get a syntax error.

The full repo can be found here: https://github.com/SIeep/motivation-app

Any help or guidance is appreciated!