How to get data from a component in VueJS - vuejs2

Question

I have the following component:
Component
<template>
<div>
<label class="typo__label">Single selecter</label>
<multiselect v-model="value" :options="options" :searchable="false" :close-on-select="false" :show-labels="false" placeholder="Pick a value"></multiselect>
</div>
</template>
<script>
import Multiselect from 'vue-multiselect'
export default {
components: {
Multiselect
},
data () {
return {
value: '',
options: ['Select option', 'options', 'selected', 'mulitple', 'label', 'searchable', 'clearOnSelect', 'hideSelected', 'maxHeight', 'allowEmpty', 'showLabels', 'onChange', 'touched']
}
}
}
</script>
I am using it in my page like so:
<p id="app-two">
<dropdown></dropdown>
#{{ value }}
#{{ message }}
</p>
<script>
new Vue({
el: '#app',
data: {
message: 'Test message'
}
});
</script>
When I run the page, #{{ message }} shows "test message" but #{{ value }} is blank.
I can see the value of the dropdown component getting updated in VueJS Dev Tools but it does not show on the page. How do I access the components data in my vue element? Something like #{{ dropdown.value }}

Answer 1

<template>
<div>
<label class="typo__label">Single selecter</label>
<multiselect v-model="internalValue" :options="options" :searchable="false" :close-on-select="false" :show-labels="false" placeholder="Pick a value"> </multiselect>
</div>
</template>
<script>
import Multiselect from 'vue-multiselect'
export default {
components: {
Multiselect
},
props: ['value'],
data () {
return {
internalValue: this.value,
options: ['Select option', 'options', 'selected', 'mulitple', 'label', 'searchable', 'clearOnSelect', 'hideSelected', 'maxHeight', 'allowEmpty', 'showLabels', 'onChange', 'touched']
}
},
watch:{
internalValue(v){
this.$emit('input', v);
}
}
}
</script>
and in your page
<p id="app-two">
<dropdown v-model="selectedValue"></dropdown>
#{{ selectedValue}}
#{{ message }}
</p>
<script>
new Vue({
el: '#app',
data: {
selectedValue: null
message: 'Test message'
}
});
</script>
Here is an example, not using multi-select, but a custom component that implements support for v-model.

Answer 2

This is the best and cleanest way for me.
Parent component
<template>
<ChildComponent v-model="selected" />
</template>
Child component
<template>
<Multiselect
:value="value"
:options="options"
:show-labels="false"
:multiple="true"
:close-on-select="false"
:clear-on-select="false"
:searchable="false"
:limit="1"
:limit-text="(count) => $t('app.multiselect.and_n_more', { n: count })"
:placeholder="$t('app.select')"
label="name"
track-by="name"
#input="$emit('input', $event)"
/>
</template>
<script>
export default {
props: {
value: {
type: Array,
default: () => []
}
},
data() {
return {
options: [{id:1, name:'John'}, {id:2, name:'Tom'}]
}
}
}
</script>