<template>
  <div class="vue-component">
     <h3>{{ $t('social_issue.title') }}</h3>
     
     <div>
        <label for="selectIssues">{{ $t('social_issue.label') }}</label>
        <VueMultiselect
            name="selectIssues"
            v-model="selected"
            :multiple="true"
            :close-on-select="false"
            :options="options">
        </VueMultiselect>
     </div>
     
  </div>
</template>

<script>
import VueMultiselect from 'vue-multiselect'

export default {
   name: "SocialIssue",
   components: { VueMultiselect },
   data () {
      return {
         selected: null,
         options: ['list', 'of', 'options']
      }
   }
}
</script>

<style src="vue-multiselect/dist/vue-multiselect.css"></style>
<style lang="scss" scoped>
   div.vue-component > div {
      margin: 3em;
   }
</style>
