Vue js достигает дочерних компонентов, дочерних от родителя

Ваш код действительно будет правильным. Однако, если вы хотите передать переменную компоненту в атрибуте HTML, вместо использования text= вам следует использовать :text=.

И вместо передачи объекта { } реквизиты Card.vue и Button.vue ожидают строку. Итак, вместо объекта передайте конкретную строку следующим образом: :text = "myVariableWithStringValue"

Card.vue

<template>
  <Button :text = "buttonText"> <!-- here need use ":text" instead of "text" -->
    <template #default = "{ text }">
      <button>{{ text }}</button>
    </template>
  </Button>
</template>

<script setup>
import Button from './Button.vue'

const props = defineProps({
  // I renamed your prop from 'props.text' to 'props.buttonText' so that we don't get confused by calling everything 'text'
  buttonText: {
    type: String,
    required: true
  }
});
</script>

Form.vue

<template>
  <div>
    <!-- I renamed your prop from 'props.text' to 'props.buttonText' so that we don't get confused by calling everything 'text' --> 
    <!-- If you want give text from variable then can use :buttonText = "variableName" -->
    <!-- Now, just give to "Some text" string as buttonText -->
    <Card buttonText = "Some text"></Card>
    <!-- And you can't use <template> in <Card> because don't have got defined <slot> in Card.vue's template -->
  </div>
</template>

<script setup>
import Card from './Card.vue'
</script>

Площадка Vue3 SFC

Кажется, вы злоупотребляете реквизитами компонентов и слотов, вы можете использовать только именованные слоты:

App.vue

<template>
  <div>
    <Card>
      <template #title>Card title</template>
      Some card content
      <template #button>Some button text</template>
    </Card>
  </div>
</template>

<script setup>
import Card from './Card.vue'

</script>

Card.vue:

<template>
    <h2><slot name = "title"></slot></h2>
    <p>
    <slot></slot>
    </p>
    <Button>
        <slot name = "button"></slot>
    </Button>
</template>

<script setup>
import Button from './Button.vue'
</script>

Кнопка.vue:

<template>
    <div>
      <button><slot></slot></button>
    </div>
</template>

<script setup>
</script>