How to connect textarea and boolean from the child component

So i have a form component made out of 2 compnents. The first one is:

<template>
  <div class="flex flex-col items-center justify-center gap-2">
    <div class="flex w-[80%] items-center justify-center gap-2 rounded-3xl p-2">
      <textarea class="w-full" :placeholder="ansPlaceholder"></textarea>
      <input type="checkbox" name="isTrue" id="" />
    </div>
  </div>
</template>

<script setup>
// eslint-disable-next-line no-unused-vars
const props = defineProps({
  ansPlaceholder: {
    type: String,
    default: 'default'
  }
})
</script>

<style scoped></style>

and then I import it and use it like this:

<template>
  <div
    name="form container"
    class="mx-auto flex w-[70%] flex-col items-center justify-center rounded-3xl border-2 border-black"
  >
    <div name="question" class="flex w-[80%] flex-col items-center justify-center gap-3 p-3">
      <p class="text-2xl font-semibold">Question</p>
      <textarea class="w-[80%]" placeholder="Add a question" v-model="question"></textarea>
    </div>
    <div name="border" class="mx-auto w-[50%] rounded-3xl border-2 border-gray-400"></div>
    <div name="answers" class="flex w-[80%] flex-col gap-2 p-3">
      <FormAnswer ansPlaceholder="Answer A"></FormAnswer>
      <FormAnswer ansPlaceholder="Answer B"></FormAnswer>
      <FormAnswer ansPlaceholder="Answer C"></FormAnswer>
      <FormAnswer ansPlaceholder="Answer D"></FormAnswer>
      <FormAnswer ansPlaceholder="Answer E"></FormAnswer>

      <select>
        <option value="">Database 1</option>
        <option value="">Database 2</option>
      </select>
      <button
        class="mx-auto mt-2 w-fit rounded-3xl border-2 border-black p-3 text-xl font-semibold transition-all duration-500 hover:scale-105 hover:bg-black hover:text-white"
        @click="getFormData()"
      >
        Submit question
      </button>
    </div>
  </div>
</template>

<script setup>
import FormAnswer from '../AdminDashboardCmp/FormAnswer.vue'
import { ref } from 'vue'
const question = ref('')
const ansE = ref('')

function getFormData() {
  console.log(ansE.value)

  const fullQuestion = {
    title: question.value,
    answers: []
  }
}
</script>

<style scoped></style>

but when i use tag:

<FormAnswer ansPlaceholder="Answer E"></FormAnswer>

i cant use for example v-model on it to get the value from textarea. How do I manage to get value of a textarea of a component?

How to do it in the easiest way possible? Im not looking for the solution with less code, but with step by step one. Thanks in advance!

You can emit an event from the inner components at @change or @input and catch it in the parent component.

Or you can save the state of those inputs in the store to be read by the parent component. You can try with Pinia or Vuex.