title: Vue-Multiselect and Vuex: Having a value from store pre-selected
body: <p>imagine a Vuejs-Application with Vuex. I want to have a mulitselect-dropdown. Basic example in the Vue-component:</p>
  
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;multiselect
        v-model="values"
        :options="options"&gt;
      &lt;/multiselect&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
    import Multiselect from 'vue-multiselect'
    export default {
      components: { Multiselect },
      data () {
        return {
          values: null,
          options: ['bar', 'foo', 'hello','test']
        }
      }
    }
  &lt;/script&gt;
  
  &lt;style src="vue-multiselect/dist/vue-multiselect.min.css"&gt;&lt;/style&gt;
  </code></pre>
  
  <p>Now, if I initialize "values" in data like this:</p>
  
  <pre><code>values: ["test"]
  </code></pre>
  
  <p>The multiselect-dropdown has "test" as already selected option. I can also deselect it on click and select it again, since it is in options.</p>
  
  <p>If I try to initialize my values like this:</p>
  
  <pre><code>values:[this.$store.state.variableIwantPreselected]
  </code></pre>
  
  <p>it does not fully work. In the selection-area/dropdown search field, those green boxes with the selected item's name are normally displayed. For me, it does not display the <strong>string</strong> in the green box, <strong>which is in this.$store.state.variableIwantPreselected</strong>, but o<em>nly a small green box with nothing written in it</em>.</p>
  
  <p>I think I missed something about Vuex and lifecycle hooks, but I could not figure out what. </p>