v-model and modelValue for multiple layers of component in vue3

Question

Hi I have component(Parent.vue) that has child component that has another child component that has input elemenet.

// Parent.vue

<Child v-model="inputValue"/>

// Child.vue
<script setup>
defineProps(['modelValue'])
defineEmits(['update:modelValue'])
</script>

<template>
  <Another-child
    v-model="modelValue"
    @update:modelValue="$emit('update:modelValue', $event.target.value)"
  />
</template>

// AnotherChild.vue

<script setup>
defineProps(['modelValue'])
defineEmits(['update:modelValue'])
</script>

<template>
  <input
    :value="modelValue"
    @input="$emit('update:modelValue', $event.target.value)"
  />
</template>

My question is if Child component should pass modelValue with v-model, or as value prop or modelValue prop when it wants to pass value to its child component?

// Child.vue
.
.
.
// v-model
  <Another-child
    v-model="modelValue" 
    @update:modelValue="$emit('update:modelValue', $event.target.value)"
  />

// or
// as value prop

  <Another-child
    :value="modelValue" 
    @update:modelValue="$emit('update:modelValue', $event.target.value)"
  />

// or
// as modelValue prop

  <Another-child
    :modelValue="modelValue" 
    @update:modelValue="$emit('update:modelValue', $event.target.value)"
  />
.
.

All of them work and bind value correctly. According to the doc, https://vuejs.org/guide/components/events.html#usage-with-v-model, I think v-model is correct but also have doubt that using prop value for v-model. Also, v-model="modelValue" works in normal app, but it fails in storybook on build.

Thanks for your help!