I'm completely new to using Vue.
In one of my components, I have integrated a multiselect component. The issue I am facing is that although I pass a value to my component and then pass it on to the multiselect, most of the time I cannot see that value reflected. Occasionally, after saving the code and re-running npm, I do get to see the result, but this seems to happen rarely.
Here is the template section of my component:
<template>
<div>
<multiselect
:value="defaultValue"
v-model="value"
...
</multiselect>
</div>
</template>
The script portion includes:
props: [some other things, "defaultValue"],
data() {
return {
value: this.defaultValue,
}
},
And I pass the prop like this:
<MyComponent other things... :defaultValue="station"/>
Currently, the output looks like this: https://i.sstatic.net/UcPMf.png
This is the desired outcome when the page loads: https://i.sstatic.net/6MfLq.png
What could be causing this problem?
Edit: When I pass v-model="defaultValue" to my multiselect, it does work. However, in doing so, I lose the ability to modify the value since props are immutable in Vue.