I need help with an error in my Vue project

I have been stuck in my Vue project for over a month now, and I have tried seeking help in places like Stackoverflow and the official Vue forum, and the general response is that people don’t understand my code or that I am idiot, so I will try my luck here.

I have made a Vue project which has a Sign Up page. The information that the user enters in the Sign Up form is sent to a database on Firebase/Firestore. After signing in, the user can then log in using email and password.
All of that WORKS.

What does NOT work is the profile page I am making for the user. It is actually very simple. I just want a page where the user can view his or her personal information once they are logged in (the same information they entered when they signed up).

The problem is that I can not fetch that data from my database. In the console I am getting this error:

vue.esm.js?efeb:628 [Vue warn]: Property or method “users” is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

The code for the profile page looks like this:

<template>

<div class="userinfo container">

    <h2 class="deep-purple-text center">Your information</h2>

         <div class="card" v-for="user in users" :key="user.id">

            <div class="card-content">

                <ul class="info">

                    <li v-for="(name, index) in user.name" :key="index">

                        <p>{{ name }}</p>

                    </li>

                    <li v-for="(address, index) in user.address" :key="index">

                        <p>{{ address }}</p>

                    </li>

                     <li v-for="(zip, index) in user.zip" :key="index">

                        <p>{{ zip }}</p>

                    </li>

                     <li v-for="(phone, index) in user.phone" :key="index">

                        <p>{{ phone }}</p>

                    </li>

                </ul>

            </div>

    </div>

</div>

</template>

<script>

import db from '@/firebase/init'

import firebase from 'firebase'

export default {

    data(){

        return{

            profile: null

        }

    },

     created(){

        let ref = db.collection('users')

        ref.doc(this.$route.params.id).get()

        .then(user => {

            this.profile = user.data()

        })

    }

    }

</script>

I would be so so so so happy if you could help me fix this. It has been bugging me now for so long.

you are using users in the markup which you didn’t define in your data