Feed data to a default slot's default content

[silentmantra]

I have the following component, and v-model="formatted" doesn't work (no values). When I remove the slot wrapper, text-input starts working ok. I guess I need to feed the input with the slot's data but I cannot use v-slot on <slot>. Any ideas?

<script setup>

const props = defineProps({
    name: String,
    format: { type: Object, default: { month: 'long', day: 'numeric' } }
});

const formatter = Intl.DateTimeFormat('ru', props.format);

const [value] = registerInput();
const formatted = computed(() => value?.value ? formatter.format(new Date(value.value)) : '');

</script>
<template>
    <slot v-bind="{ value: formatted }">
        <text-input readonly v-model="formatted"></text-input>
    </slot>
</template>

[LinusBorg]

I have trouble understand what you are trying to achieve, exactly. Can you elaborate?

1. From what I'm seeing, you have this input as the default slot content, so a parent component filling the <slot> would override that. Is that intended?
2. If so, I assume you want to allow the consumer of this component to provide their own input, while the data still somehow runs through this formatter?
3. If so, I think a wrapper component is not really an ergonomic solution for that, a composable would be much easier to write and use.

Am I on the right track, or am I completely off? Please clarify.

[silentmantra]

imagine, there's no slot content provided, so the default slot's default content is used (<text-input readonly v-model="formatted"></text-input>. and it doesn't work, formatted doesn't work. when I remove <slot>, <text-input> starts working good. strange...