v-model does not show the value of the attribute loaded in created() or mounted()

[LucasS03]

Value of attribute q not load if alter in created() or mounted(), as in my example:

HTML:

<vue-bootstrap-typeahead
   v-model="q"
   :data="list"
   :serializer="i => i.name"
   placeholder="Choose your bank"
   @hit="selectedItem($event)"
   class="vue-autocomplete">
</vue-bootstrap-typeahead>

JAVASCRIPT:

data() {
   return {
      q: "",
      list: []
   }
},
mounted() {
   this.q = loadValueDatabase();
}

The value of attribute q is altered, but not renderized in v-model

[ttodua]

I doubt similar issue has been opened, check there if any update.

[mark-stephen-maduro]

You can use ref to add loaded value.

<vue-bootstrap-typeahead
ref="typeahead"
v-model="q"
:data="list"
:serializer="i => i.name"
placeholder="Choose your bank"
@hit="selectedItem($event)"
class="vue-autocomplete">

mounted() {
this.$refs.typeahead.inputValue = loadValueDatabase();
}