title: How to get data from a component in VueJS
body: <p>I have the following component:</p>
  
  <p><strong>Component</strong></p>
  
  <pre><code>&lt;template&gt;
  &lt;div&gt;
    &lt;label class="typo__label"&gt;Single selecter&lt;/label&gt;
    &lt;multiselect v-model="value" :options="options" :searchable="false" :close-on-select="false" :show-labels="false" placeholder="Pick a value"&gt;&lt;/multiselect&gt;
  &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  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']
      }
    }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>I am using it in my page like so:</p>
  
  <pre><code>&lt;p id="app-two"&gt;
    &lt;dropdown&gt;&lt;/dropdown&gt;
    @{{ value }}
    @{{ message }}
  &lt;/p&gt;
  
  &lt;script&gt;
      new Vue({
      el: '#app',
      data: {
          message: 'Test message'
      }
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>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 }}</p>