Tring to pass a component with directive in the slot of an other one

[ayoubmehd]

Edit: I think it's a bug it's working fine in vue 2

Edit: my bad i just put v-modal instead of v-model 🙄

I don't know if this is a bug or not possible

I tring to pass a component with the v-model directive in the slot of an other one

This is the parent component

<script setup lang="ts">

import { ref } from "vue";

import Containerfrom "./Container.vue";
import SearchInput from "./Base/SearchInput.vue";

const search = ref("");

</script>

<template>
  <Container>
    <div class="shadow-md w-full bg-white rounded-md">
      <form method="post" @submit.prevent="" class="w-full block px-2">
        <SearchInput v-modal="search" />
      </form>
      <div class="px-4">
        <div>Data</div>
      </div>
    </div>
  </Container>
</template>

Input component

<script setup lang="ts">
import { computed } from "vue";

const props = defineProps(["modalValue"]);
const emit = defineEmits(["update:modelValue"]);

const search = computed({
  get() {
    return props.modalValue;
  },
  set(value) {
    emit("update:modelValue", value);
  },
});
</script>

<template>
  <input
    type="search"
    v-model="search"
    aria-label="Search by student name"
    placeholder="Search by student name"
    class="block w-full px-4 py-2 border-b-2"
  />
</template>

Container Component

<template>
  <div class="flex justify-center w-screen items-center h-screen">
    <div
      class="w-full sm:w-2/3 lg:w-1/2 h-screen sm:h-5/6 md:h-2/3 overflow-auto scrollbar-thin"
    >
      <slot></slot>
    </div>
  </div>
</template>

In the browser console this error will be shown

Uncaught TypeError: dir is undefined
    withDirectives runtime-core.esm-bundler.js:2764
    default Students.vue:67
    renderFnWithContext runtime-core.esm-bundler.js:853
    renderSlot runtime-core.esm-bundler.js:2968
    _sfc_render WrapContent.vue:10
    renderComponentRoot runtime-core.esm-bundler.js:896
    componentUpdateFn runtime-core.esm-bundler.js:5575
    run reactivity.esm-bundler.js:185
    update runtime-core.esm-bundler.js:5689
    setupRenderEffect runtime-core.esm-bundler.js:5703
    mountComponent runtime-core.esm-bundler.js:5485
    processComponent runtime-core.esm-bundler.js:5443
    patch runtime-core.esm-bundler.js:5033
    componentUpdateFn runtime-core.esm-bundler.js:5582
    run reactivity.esm-bundler.js:185
    update runtime-core.esm-bundler.js:5689
    setupRenderEffect runtime-core.esm-bundler.js:5703
    mountComponent runtime-core.esm-bundler.js:5485
    processComponent runtime-core.esm-bundler.js:5443
    patch runtime-core.esm-bundler.js:5033
    componentUpdateFn runtime-core.esm-bundler.js:5582
    run reactivity.esm-bundler.js:185
    update runtime-core.esm-bundler.js:5689
    setupRenderEffect runtime-core.esm-bundler.js:5703
    mountComponent runtime-core.esm-bundler.js:5485
    processComponent runtime-core.esm-bundler.js:5443
    patch runtime-core.esm-bundler.js:5033
    render2 runtime-core.esm-bundler.js:6204
    mount runtime-core.esm-bundler.js:4402
    mount runtime-dom.esm-bundler.js:1606
    <anonymous> main.ts:6
runtime-core.esm-bundler.js:2764:12
    withDirectives runtime-core.esm-bundler.js:2764
    default Students.vue:67
    renderFnWithContext runtime-core.esm-bundler.js:853
    renderSlot runtime-core.esm-bundler.js:2968
    _sfc_render WrapContent.vue:10
    renderComponentRoot runtime-core.esm-bundler.js:896
    componentUpdateFn runtime-core.esm-bundler.js:5575
    run reactivity.esm-bundler.js:185
    update runtime-core.esm-bundler.js:5689
    setupRenderEffect runtime-core.esm-bundler.js:5703
    mountComponent runtime-core.esm-bundler.js:5485
    processComponent runtime-core.esm-bundler.js:5443
    patch runtime-core.esm-bundler.js:5033
    componentUpdateFn runtime-core.esm-bundler.js:5582
    run reactivity.esm-bundler.js:185
    update runtime-core.esm-bundler.js:5689
    setupRenderEffect runtime-core.esm-bundler.js:5703
    mountComponent runtime-core.esm-bundler.js:5485
    processComponent runtime-core.esm-bundler.js:5443
    patch runtime-core.esm-bundler.js:5033
    componentUpdateFn runtime-core.esm-bundler.js:5582
    run reactivity.esm-bundler.js:185
    update runtime-core.esm-bundler.js:5689
    setupRenderEffect runtime-core.esm-bundler.js:5703
    mountComponent runtime-core.esm-bundler.js:5485
    processComponent runtime-core.esm-bundler.js:5443
    patch runtime-core.esm-bundler.js:5033
    render2 runtime-core.esm-bundler.js:6204
    mount runtime-core.esm-bundler.js:4402
    mount runtime-dom.esm-bundler.js:1606
    <anonymous> main.ts:6
    InnerModuleEvaluation self-hosted:2328
    evaluation self-hosted:2289

[tony19]

[tony19]

Oops...just saw your edit that you realized the problem.

[ayoubmehd]

Thanks anyway 👍