How to add custom widget about vuetify-form-base HOT 12 CLOSED

<!--  /component/customcomponent.vue -->
<template>
  <div >
    <h4>Custom Control Object</h4>
    <v-text-field v-model="value.a" @input="$emit('input', value)" label="A"></v-text-field>
    <v-text-field v-model="value.b" @input="$emit('input', value)" label="B"></v-text-field>
    <v-btn small color="grey" dark  @click="clear">Clear both</v-btn>    
  </div>
</template>

<script>
export default {
  props: ['type','value'],    
  methods:{
    clear(){
      this.value.a = null
      this.value.b = null
      this.$emit('input', this.value)
    }    
  }
}
</script>

Vue.component('v-custom1', () => import('@/components/customcomponent.vue') )

  profileSchema = {
    phone: {
      type: 'VuetifyPhoneInput',
      label: 'Phone',
      class: 'py-0 px-1',
      outlined: true,
    },
  };

// Global definition in 'main.js'
// works
Vue.component('custom-basic-a', () => import('@/components/customcomponent-basic.vue') )
Vue.component('customBasicB', () => import('@/components/customcomponent-basic.vue') )
// doesn't work
Vue.component('custom-basic-c', () => import('@/components/customcomponent-basic.vue') )

// works
schema: { custom1: { type: 'custom-basic-a', label:'Component - Basic' }  }
schema: { custom1: { type: 'customBasicB', label:'Component - Basic' }  }
// doesn't work
schema: { custom1: { type: 'customBasicC', label:'Component - Basic' }  }

import Vue from 'vue'
import VueTelInputVuetify from 'vue-tel-input-vuetify'

Vue.use(VueTelInputVuetify)

Vue.component('vue-tel-input-vuetify', VueTelInputVuetify);

  profileSchema = {
    phone: {
      type: 'VuetifyPhoneInput',
      label: 'Phone',
      class: 'py-0 px-1',
      outlined: true,
    },
  };

and

  profileSchema = {
    phone: {
      type: 'vue-tel-input-vuetify',
      label: 'Phone',
      class: 'py-0 px-1',
      outlined: true,
    },
  };

Vue.component('v-vue-tel-input-vuetify', VueTelInputVuetify);

// MAP TYPE TO COMPONENT
    mapTypeToComponent(type) {
      // merge global registered components into typeToComponent Object
      const allTypeComponents = { ...typeToComponent, ...Vue.options.components}
      // const typeToComponent -> maps type to according v-component 
      // ie. schema:{ type:'password', ... } to specific vuetify-control or default to v-text-field'

      return allTypeComponents[type] 
          ? allTypeComponents[type] 
          : `v-${type}` // add v- to schema type
    },

import Vue from 'vue'
import App from '@/App.vue'
import VueTelInputVuetify from 'vue-tel-input-vuetify'
import vuetify from '@/plugins/vuetify'

Vue.use(VueTelInputVuetify, {
  vuetify,
});

console.log('VueTelInputVuetify', VueTelInputVuetify);

console.log('Components', Vue.options.components)

new Vue({
  el: '#main',
  vuetify,
  render: h => h(App)
})

schema: {  myTel: { type:'vue-tel-input-vuetify' }