How do you use components with data from Nuxt Content Module - vue.js

Question

A component that has a hidden input field should have a the value of the current page title. In Nuxt you can accomplish it using asyncData for all pages except for pages using Nuxt Content Module. The Nuxt Content Module does not allow asyncData but fetch is allowed but. Example:
components/Form.vue
<template>
<div>
<input
id="page"
type="hidden"
:value="article.title"
required
/>
</div>
</template>
<script>
export default {
async fetch() {
this.article = await this.$content('articles', this.params).fetch()
},
data() {
return { article: {} }
},
}
</script>
pages/articles/_slug.vue
<template>
<div>
<h1>{{ article.title }}</h1>
<Form />
</div>
</template>
<script>
export default {
async asyncData({ $content, params }) {
const article = await $content('articles', params.slug).fetch()
return { article }
},
}
</script>
This code gets no errors but the component never shows page title in the hidden input only in the h1 tag. (edit: fixed typo)

Answer 1

How I solved this was with props.
components/Form.vue
<template>
<form>
<label for="title"> Title </label>
<input name="title" type="hidden" :value="title" required />
<button type="submit">Send</button>
</form>
</template>
<script>
export default {
props: {
title: {
type: String,
required: false,
default: ''
},
}
}
</script>
and then in the pages/_slug.vue
<template>
<div>
<nuxt-content :document="doc" />
<Form :title="doc.title" />
</div>
</template>
This should work for you.