Vue 3 – template ref with computed?

Solution for Vue 3 – template ref with computed?
is Given Below:

How may I focus on this simple input example?
Should I create one more variable const nameRef = ref(null) or there is more beauty way to resolve this?

 <template>
    <input ref="name" :value="name" />
 </template>
    
 <script>
    import {ref, computed} from 'vue';
    export default {
      props: ['name'],
      setup(props) {
        const name = computed(() => someTextPrepare(props.name));
    
        // how can I do name.value.focus() for example?
    
        return { name }
      }
    }
</script>

Try to wrap the name value and ref in reactive property :

 <template>
    <input :ref="theName.ref" :value="theName.value" />
 </template>
    
 <script>
    import {ref, computed,reactive} from 'vue';
    export default {
      props: ['name'],
      setup(props) {
        const theName=reactive({
                 value:computed(() => someTextPrepare(props.name)),
                 ref: ref(null)
         })
   
        return { theName }
      }
    }
</script>