I am coming from the React background so I don’t really know much about Vue.
The thing is I need to fix some stuff in a Vue project.

In the Parent component.

import NumberField from '../fields/NumberField.vue'; //Child component

export default defineComponent({
  name: 'Questionnaire',
  components: {
    MultipleChoiceField,
    NumberField,
    ....
  },
});

const fieldType = computed<string>(() => {
  questionTitleAttribute();
  switch (currentQuestion.value.type) {
    case 'multiple_choice':
      return 'MultipleChoiceField';
    case 'number':
      return 'NumberField';
    default:
      console.error('Unidentified field type');
      return '';
  }
});

<div>
    <component
        id="current"
        :is="fieldType"
        :question="currentQuestion"
        :answer="currentAnswer"
        :show-insights="showInsights"
        :additions="additions"
        :set-question="setQuestion"
     />
</div>

As you can see it is choosing from multiple field and use the appropriate one. But the thing is currently you can see the statement :question="currentQuestion"

What I want to do is I want to access the currentQuestion.validation in the child component. But It is kind of complicated when I try to console.log in the child component

Here is child component

const props = withDefaults(
  defineProps<{
    question: QuestionnaireField;
    answer?: QuestionnaireNumberAnswer | undefined;
    additions: PrefilledAdditionalParameters;
  }>(),
  { answer: undefined }
);

    const emit = defineEmits(['allowContinue', 'editAnswer']);
    
    const { additions, answer, question } = toRefs(props);
    
    console.log('-----');
    console.log(question);
    console.log('-----');

Here is the nested object which I need to access the validations