how to use in vue 3 js

[Danador]

I need to get the date change value for further work in the parent component via v-model but it doesn't get the value below is a code sample:

// components
import { defineComponent, onMounted, ref, watch } from "vue";
import { Icon, useModelProxy } from "@/shared";
import AirDatepicker from 'air-datepicker';
import { InputDateProps } from "./types";
import { initDefaultProps } from "../_util";

// styles
import 'air-datepicker/air-datepicker.css';
import './index.sass'

export const InputDate = defineComponent({
props: initDefaultProps(InputDateProps(), { type: 'date' }),
emits: ['update:modelValue'],
setup(props, { emit }) {

    const model = useModelProxy()

    const inputDate = ref<HTMLInputElement | null>(null)

    const updateModel = (value:string) => {
        emit('update:modelValue', value);
    }

    const createDatepicker = () => {
        let obj = {}
        if (props.type === 'time') {
            obj = {
                timepicker: true,
                onlyTimepicker: true,
                position: 'bottom center'
            }
        } else {
            obj = {
                selectedDates: [new Date()],
                position: 'bottom center'
            }
        }
        return new AirDatepicker(`#${props.id}`, {...obj});
    }

    const setAttrs = () => {
      const input  = document.getElementById(props.id);
      if(props.type === 'time'){
        input?.setAttribute('maxlength', '5');
        input?.setAttribute('placeholder', '00:00')
      } else {
        input?.setAttribute('maxlength', '8');
        input?.setAttribute('placeholder', '')
      }
    }

    watch(model, () => {
        console.log(model.value);
    })

    onMounted(() => {
        createDatepicker();
        setAttrs();
    })

    return {
        model,
        updateModel,
        inputDate
    };
},
render(props) {
    const { type, title, id, dateClass } = props
    return(
        <div class="container-date">
            {title ? (
                <span 
                    class="title-date"
                    v-text={title}
                ></span>
            ) : ''}
            <label class={`label-date ${dateClass}`}>
                <Icon 
                    class={type}
                    name={type}
                />
                <input 
                    ref="inputDate"
                    id={id}
                    readonly
                    class="date-field" 
                    type="text"
                    onselect={() => this.updateModel(this.$refs.inputDate.value)}
                />
            </label>
        </div>
    )
}

})

[t1m0n]

@Danador could you please recreate working example in https://codesandbox.io