How to make component from vue-flatpickr-component

I want to use vue-flatpickr-component and make a custom component, to wrap it inside a div and add label above it. I came up with this:

<script setup>
import flatPickr from 'vue-flatpickr-component';
import 'flatpickr/dist/flatpickr.css';
import {computed} from "vue";

const props = defineProps({
    label: {
        type: String,
        required: true
    },
    model: {
        type: String
    },
    required: {
        type: Boolean,
        default: true
    },
    form: {
        type: Object,
        required: true
    }
});

const slugify = computed(() => {
    return props.label.toLowerCase()
        .trim()
        .replace(/[^\w\s-]/g, '')
        .replace(/[\s_-]+/g, '-')
        .replace(/^-+|-+$/g, '')
})
</script>

<template>
    <div class="mb-3">
        <label :for="slugify" class="col-form-label text-capitalize">{{ props.label }} <span v-if="props.required" class="text-danger">*</span></label>
        <flat-pickr :class="[{'is-invalid': props.form.errors[props.model]},'form-control']" :id="slugify" v-model="form[props.model]" :config="{static: true}"/>
        <div class="mt-2 fs-9 text-danger" v-if="props.form.errors[props.model]">{{ props.form.errors[props.model] }}</div>
    </div>
</template>

and I used it like this:

<FlatPickrInput label="Date" model="spent_at" :form="form"/>

and it works fine but I know this is the wrong way of doing it, but I don't know how make it right.