Hello. I believe that with recent versions of Vue, it is possible to handle things more easily.

The recommended approach to implement two-way binding on a component with v-model is to use the defineModel() macro.

const model = defineModel()

<Input v-model="model" />

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
    
  

Prop destructuring is now supported and allows to declare default values.

const { type = 'text' } = defineProps<{...}>()

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
    
  

Lastly, there is a shorthand for attribute bindings with same name.

<Input :type :disabled :required />

  

    

      Copied!