get SocialIssues List in multiselect

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/SocialIssue.vue

@@ -3,12 +3,18 @@
      <h3>{{ $t('social_issue.title') }}</h3>
      
      <div>
-        <label for="selectIssues">{{ $t('social_issue.label') }}</label>
+        <!--label for="selectIssues">{{ $t('social_issue.label') }}</label-->
         <VueMultiselect
             name="selectIssues"
             v-model="selected"
+            track-by="id"
+            label="text"
+            :placeholder="$t('social_issue.label')"
             :multiple="true"
+            :searchable="true"
             :close-on-select="false"
+            :allow-empty="true" 
+            :show-labels="false" 
             :options="options">
         </VueMultiselect>
      </div>
@@ -18,6 +24,7 @@
 
 <script>
 import VueMultiselect from 'vue-multiselect'
+import { getSocialIssues } from '../api'
 
 export default {
    name: "SocialIssue",
@@ -25,8 +32,22 @@ export default {
    data () {
       return {
          selected: null,
-         options: ['list', 'of', 'options']
+         options: []
       }
+   },
+   computed: {
+   },
+   mounted() {
+      this.getOptions();
+   },
+   methods: {
+      getOptions() {
+         getSocialIssues().then(socialIssues => new Promise((resolve, reject) => {
+            console.log('socialIssues', socialIssues);
+            this.options = socialIssues.results; 
+            resolve();
+         })).catch(error => this.$store.commit('catchError', error));        
+      },
    }
 }
 </script>