VueJs Multiselect - only one option showing - vue.js

Question

I'm using VueJS Multiselect and when I make a selection from the drop-down menu the other options disappear. How can I choose multiple options?
Also, how do I remove the [] (square brackets) from displaying at the You selected: {{ value }}?
<template>
<div class="container">
<div class="row">
<div class="col-12 col-lg-10 container">
<div>
<Multiselect
v-model="value"
:options="posts"
mode="tags"
:multiple="true"
label="title"
/>
</div>
<p>You selected: {{ value }}</p>
</div>
</div>
</div>
</template>
<script>
import axios from "axios";
import Multiselect from "#vueform/multiselect";
export default {
components: {
Multiselect,
},
data: function () {
return {
posts: [],
id: [],
value: [],
};
},
created() {
this.getPosts();
},
methods: {
getPosts() {
axios
.get("https://jsonplaceholder.typicode.com/posts")
.then((response) => {
// eslint-disable-next-line
console.log(response);
this.posts = response.data;
})
.catch((error) => {
// eslint-disable-next-line
console.log(error);
});
},
},
};
</script>
<style src="#vueform/multiselect/themes/default.css"></style>

Answer 1

Try this way :
new Vue({
components: {
Multiselect: window.VueMultiselect.default
},
data: {
value: {
"userId": 1,
"id": 1,
"title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
"body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
},
posts: [
{
"userId": 1,
"id": 1,
"title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
"body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
},
{
"userId": 1,
"id": 2,
"title": "qui est esse",
"body": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla"
},
{
"userId": 1,
"id": 3,
"title": "ea molestias quasi exercitationem repellat qui ipsa sit aut",
"body": "et iusto sed quo iure\nvoluptatem occaecati omnis eligendi aut ad\nvoluptatem doloribus vel accusantium quis pariatur\nmolestiae porro eius odio et labore et velit aut"
},
{
"userId": 1,
"id": 4,
"title": "eum et est occaecati",
"body": "ullam et saepe reiciendis voluptatem adipisci\nsit amet autem assumenda provident rerum culpa\nquis hic commodi nesciunt rem tenetur doloremque ipsam iure\nquis sunt voluptatem rerum illo velit"
}]
},
methods: {
customLabel (option) {
return option.title
}
}
}).$mount('#app')
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/vue-multiselect#2.0.3/dist/vue-multiselect.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-multiselect#2.0.2/dist/vue-multiselect.min.css"/>
<div id="app">
<template>
<multiselect
v-model="value"
:options="posts"
:multiple="true"
track-by="id"
:custom-label="customLabel"
>
</multiselect>
<pre>{{ value }}</pre>
</template>
</div>