Ошибка в nuxt - Property or method * is not defined on the instance but referenced during render
вот код страницы:
<template>
<div class="container">
<div class="mt-5">
<b-alert variant="success" show>{{ name }} <b-badge>{{ type }}</b-badge></b-alert>
</div>
<hr>
<div class="row">
<div class="col-md-6">
<div class="card">
<div class="card-header">
<p class="mb-0">Добавить объявление</p>
</div>
<div class="card-body">
<form @submit.prevent="">
<div class="form-group">
<label>Категория</label>
<b-form-select v-model="form.selected" :options="options"></b-form-select>
</div>
</form>
</div>
</div>
</div>
</div>
<hr>
</div>
</template>
<script>
export default {
middleware: 'auth',
data: () => ({
data: [],
name: '',
type: '',
ads: []
}),
async mounted() {
this.data = await this.$axios.$get('/me');
this.name = this.user.name;
this.type = this.data.type;
if(this.data.ads.length > 0) {
this.ads = this.data.ads;
} else {
this.ads = 0;
}
},
data() {
return {
form: {
selected: null
},
options: [
{ value: null, text: 'Выберите категорию' },
{ value: 'auto', text: 'Авто' },
{ value: 'property', text: 'Недвижимость' },
{ value: 'other', text: 'Другое' }
]
}
}
};
</script>
Возникают ошибки:
Property or method "name" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.
и
Property or method "type" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.
Как правильно сделать эти элементы реактивными? Я новичок, по этому прошу не судить строго. Буду благодарен за помощь.