Vue js: Multiple options selection

Question

Objective: To Select multiple options of a select tag.

Attempt: The documentation says: to implement a multi-select input, the property to be bound using v-model should be an array.

Errors: [Vue warn]: expects an Array value for its binding, but got String.

The value bound to (multipleSelections), is an array, so what is the reason for this?

Here is the jsfiddle.

script:

new Vue({
el:'#app',
data: function() {
  return {
      multipleSelections: ["Mr Potato (Manager)"],
      data: null,
      multiple: "true",
      assets:["Mr Potato (Manager)", "Mr Blade (Manager)", "Mrs Spice (Manager)"]
    }
  },
  created() {
    console.log("selections: ",this.multipleSelections);
  }
});

html:

<script src="https://unpkg.com/vue@2.0.6/dist/vue.js"></script>
<div class='container' id='app'>
  <h2>{{"title".toUpperCase()}}</h2>
  <p class='center help-text' v-if="multiple === 'true'">(Use ctrl or cmd to select multiple)</p>
  <select
    :multiple="multiple === 'true'"
    v-bind:class="{ 'fix-height': multiple === 'true' }"
    v-model="multipleSelections"
   >
    <option
      v-for="asset in assets"
      :value="asset">
      {{asset}}
    </option>
  </select>
{{ multipleSelections }}

Answer 1

Just giving multiple="true" in select works. Here is jsfiddle link.

 <select
      multiple="true"
      v-bind:class="{ 'fix-height': multiple === 'true' }"
      v-model="multipleSelections"
      >