Multi select cleared after select

Hi, In my component I pass via props data for multi-select when I tried to select other data my select whas cleared fully :

<template>
  <div>
    <b-form-group label="Rôle: ">
      <b-form-select
        @change="emit"
        class="mb-3"
         v-model="value"
         id="form_roles"
          aria-describedby="choicesLiveFeedback"
          :state="formState"
         :multiple="true">
        <option :value="null">Select options</option>
        <option v-for="(role, index) in roles" :key="index" :value="role" >{{ role }}</option>
      </b-form-select>
      <b-form-invalid-feedback id="choicesLiveFeedback" :style="formStyle">
        {{ state }}
      </b-form-invalid-feedback>
    </b-form-group>
  </div>
</template>
<script>
export default {
  name: 'UserRole',
  props: ['value', 'state'],
  data () {
    return {
      roles: [],
      selected: [],
    }
  },
  watch: {
    value () {
      // if (this.selected !== this.value){
       // this.selected = this.value
      // }
    }
  },
  computed: {
      formState () {
        if (this.state !== undefined && this.state.length > 0) {
          return false
        }
      },
      formStyle () {
        if (!this.formState){
          return 'display: block'
        }
      }
    },
  methods: {
    emit (event) {
      this.$emit('input', [event])
    }
  },
  created () {
    // console.log(this.value);
    this.$http.get('/api/rest/securtity/roles').then(
      response => {
        this.roles = response.body
      }
    )
  }
}
</script>

at every test select was empty in view …

[darkiron]

to update parent object ? maybe ?

[emanuelmutschlechner]

@darkiron Your implementation has some flaws. Make sure to check Vue documentation on how to create a custom component that works with v-model as you expect it. https://vuejs.org/v2/guide/components-custom-events.html#Customizing-Component-v-model

Check my example below, hope this helps https://codesandbox.io/s/9zj7943prr