$el is undefined while $ref has a the object in Vuejs 3

I'm trying to get a reference to the element of a textbox but $el is undefined while its $ref has the object.

What am i doing wrong here....I over-simplified my code to bring out the question. Thanks!

    app.component('lit-entry', {
        template:
            /*html*/
            `
    <div>
    
    {{ message }}
    
    <input v-model="favoriteColor" type="textbox" ref="refColor" />
    
    </div>
    
    `,
        data() {
            return {
               message :"Hey there!",
                favoriteColor:"Blue"
            }
           
        }
        , mounted() {
          
            debugger;
            var x = this.$refs.refColor.$el;  
           //refColor has a value but $el is undefined?!?             
    
        }
    
    });