"this is null" when change in v-select [NuxtJs] - vue.js

Question

this is my first post! Hope you can help.
So I'm on some new project to migrate to nuxtJs.
I have some trouble with my v-select and v-model, here's the code:
_id.vue:
<template>
<v-container fluid white>
<v-card>
<v-card-title class="headline">
TEST:
</v-card-title>
<v-card-text>
<p>info :</p>
<p>{{this.host.typeS}}</p>
<v-select
v-model="this.host.typeS"
:items="this.fields.typeS"
item-value="value"
item-text="value"
dense outlined>
</v-select>
</v-card-text>
</v-card>
</v-container>
</template>
script
export default {
name: 'EditPage',
data() {
return {
tab: null,
fields: [],
host: {},
tabHeaders: ["tab1", "tab2", "tab3", "tab4", "tab5", "tab6"]
}
},
async fetch() {
this.fields = await fetch("APIfields")
.then(res => res.json());
if (this.$nuxt._route.params.id) {
this.host = await fetch("APIhost" + this.$nuxt._route.params.id).then(res => res.json());
} else {
this.host = {};
}
}
}
responses
APIfields:
{"typeS": [{"value": "p","order": 100}, {"value":"v","order": 100}],
"otherThings": [{"value":"se", "order": 100},{"value":"sa", "order": 100}]}
APIhost/id:
{"typeS": "p",
"otherThings": "se"}
When everything run, My select is initiated with the value "p" and when clicked I see all the values this field can have.
When I try selecting "v" in the v-select, I'm redirected to my error layout, and the console say "Type error: this is null".
Without the v-model, I don't have any error, but the v-select have no selected value.
The goal is to initialise a form based on an existing host, change the data inside the form and then submit it to the database. The form should also be used to create new hosts (empty form)
The same error appear in my textfields and checkboxes.
Do you have any idea or track I can follow?

Answer 1

you don't need this when working on vue templates
<template>
<v-container fluid white>
<v-card>
<v-card-title class="headline">
TEST:
</v-card-title>
<v-card-text>
<p>info :</p>
<p>{{host.typeS}}</p>
<v-select
v-model="host.typeS"
:items="fields.typeS"
item-value="value"
item-text="value"
dense outlined>
</v-select>
</v-card-text>
</v-card>
</v-container>
</template>
note that :items takes an array but you are using fields.typeS so it's better to set field in data as
fields: {}
since it's an object