Can't access Axios data after sending it to array in Vue - vue.js

Question

I'm trying to display data I'm getting with an Axios request, when I log this.form in console it displays the data, but when I try to output the title with {{ form.title }} nothing shows. When look in Vue dev-tools 'form' isn't populated too. What am I missing?
My code:
<template>
<div class="newitem">
<h2>Bewerk {{ form.title }}</h2>
<form #submit.prevent="formSubmit">
<label for="name">Naam van de taak</label>
<input type="text" name="name" id="name" v-model="form.title">
<div class="date">
<div class="date__item allday">
<label for="allDay">Hele dag</label>
<input type="checkbox" name="allDay" id="allDay" v-model="form.allDay">
</div>
<div class="date__item">
<label for="date">Datum wanneer je begint</label>
<input type="date" name="date" id="date" v-model="form.date">
</div>
<div v-if="!this.form.allDay" class="date__item">
<label for="from">Tijd wanneer je begint</label>
<input type="time" name="from" id="from" v-model="form.from">
</div>
<div v-if="!this.form.allDay" class="date__item">
<label for="till">Tijd wanneer je denkt klaar te zijn</label>
<input type="time" name="till" id="till" v-model="form.till">
</div>
<div class="date__item">
<label for="date">Datum wanneer denkt klaar te zijn</label>
<input type="date" name="date" id="date" v-model="form.date">
</div>
</div>
<label for="type">Type</label>
<select name="type" id="type" v-model="form.type">
<option selected disabled>Kies een type</option>
<option>SO</option>
<option>Repetitie</option>
<option>Leerwerk</option>
<option>Maakwerk</option>
</select>
<label for="description">Wat ga je je maken/leren?</label>
<textarea id="description" v-model="form.description"></textarea>
<button class="button button-primary">Opslaan</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
form: [],
}
},
created() {
this.fetchPost();
},
methods: {
fetchPost() {
this.$eventBus.$on('send-data', (id) => {
axios.get('/agenda_items/' + id).then(response => {
this.form = response.data;
console.log(this.form)
})
.catch(error => console.log(error))
});
},
}
}
</script>
edit with v-for:
<template>
<div class="newitem">
<div class="newitem__inner" v-for="form in forms" :key="form.id">
<h2>Bewerk {{ form.title }}</h2>
<form #submit.prevent="formSubmit">
<label for="name">Naam van de taak</label>
<input type="text" name="name" id="name" v-model="form.title">
<div class="date">
<div class="date__item allday">
<label for="allDay">Hele dag</label>
<input type="checkbox" name="allDay" id="allDay" v-model="form.allDay">
</div>
<div class="date__item">
<label for="date">Datum wanneer je begint</label>
<input type="date" name="date" id="date" v-model="form.date">
</div>
<div v-if="!this.form.allDay" class="date__item">
<label for="from">Tijd wanneer je begint</label>
<input type="time" name="from" id="from" v-model="form.from">
</div>
<div v-if="!this.form.allDay" class="date__item">
<label for="till">Tijd wanneer je denkt klaar te zijn</label>
<input type="time" name="till" id="till" v-model="form.till">
</div>
<div class="date__item">
<label for="date">Datum wanneer denkt klaar te zijn</label>
<input type="date" name="date" id="date" v-model="form.date">
</div>
</div>
<label for="type">Type</label>
<select name="type" id="type" v-model="form.type">
<option selected disabled>Kies een type</option>
<option>SO</option>
<option>Repetitie</option>
<option>Leerwerk</option>
<option>Maakwerk</option>
</select>
<label for="description">Wat ga je je maken/leren?</label>
<textarea id="description" v-model="form.description"></textarea>
<button class="button button-primary">Opslaan</button>
</form>
</div>
</div>
</template>
<script>
export default {
data() {
return {
forms: [],
}
},
created() {
this.fetchPost();
},
methods: {
fetchPost() {
this.$eventBus.$on('send-data', (id) => {
axios.get('/agenda_items/' + id).then(response => {
this.forms = response.data;
console.log(this.forms)
})
.catch(error => console.log(error))
});
},
}
}
</script>

Answer 1

It seems the eventbus was the problem. I removed it, and got the id with this.$attrs.id;
fetchPost() {
var id = this.$attrs.id;
axios.get('/agenda_items/' + id).then(response => {
this.form = response.data[0];
})
.catch(error => console.log(error))
}