Component with multiple select components

app.vue

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <button class="btn btn-success" @click="isVisible = true">SHOW MODAL</button>
    <HelloWorld msg="Welcome to Your Vue.js App"/>
    <b-modal v-model="isVisible"
             scrollable
             size="lg"
             :hide-header="false"
             :hide-header-close="true"
             :hide-footer="true"
             :modal-class="['modal-xlg']">
      <HelloWorld msg="Welcome to Your Vue.js App"/>
    </b-modal>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'app',
  components: {
    HelloWorld
  },
  data(){
    return {
      isVisible: false
    }
  }
}
</script>

<style>

  .stf-select-options {
    z-index: 2060 !important;
  }

#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

component.vue

  <template>
  <div class="hello">
    <div v-for="i in 10">
      <label>Select without input</label>
      <stf-select v-model="value" style="width: 300px; margin: 0 auto">
        <div slot="label">Input address</div>
        <div slot="value">
          <div v-if="value">
            <span>{{value.address}} (<small>{{value.text}}</small>)</span>
          </div>
        </div>
        <section class="options delivery_order__options">
          <stf-select-option
                  v-for="item of list" :key="item.id"
                  :value="item"
                  :class="{'stf-select-option_selected': item.id === (value && value.id)}"
          >
            <span>{{item.text}} (<small>{{item.address}}</small>)</span>
          </stf-select-option>
        </section>
      </stf-select>
      <div style="height: 200px; border: 1px solid green"></div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      value: null,
      list: [
        {
          "id": 1,
          "address": "Dahl Court",
          "text": "Koogle"
        },
        {
          "id": 2,
          "address": "Pierrepont Place",
          "text": "Kangle"
        },
        {
          "id": 3,
          "address": "Hanson Place",
          "text": "Obliq"
        },
        {
          "id": 4,
          "address": "Wythe Place",
          "text": "Dognosis"
        },
        {
          "id": 10,
          "address": "Judge Street",
          "text": "Gorganic"
        },
        {
          "id": 5,
          "address": "Madeline Court",
          "text": "Aquacine"
        },
        {
          "id": 6,
          "address": "Glenwood Road",
          "text": "Imant"
        },
        {
          "id": 7,
          "address": "Stuyvesant Avenue",
          "text": "Adornica"
        },
        {
          "id": 8,
          "address": "Love Lane",
          "text": "Ozean"
        },
        {
          "id": 9,
          "address": "Cumberland Walk",
          "text": "Steelfab"
        },
        {
          "id": 10,
          "address": "Gunnison Court",
          "text": "Maximind"
        },
        {
          "id": 11,
          "address": "Interborough Parkway",
          "text": "Lovepad"
        },
        {
          "id": 12,
          "address": "Anthony Street",
          "text": "Norsul"
        },
        {
          "id": 13,
          "address": "Legion Street",
          "text": "Eplosion"
        },
        {
          "id": 14,
          "address": "Schermerhorn Street",
          "text": "Bugsall"
        },
        {
          "id": 15,
          "address": "Irving Avenue",
          "text": "Orbixtar"
        },
        {
          "id": 16,
          "address": "Hooper Street",
          "text": "Danja"
        }
      ]
    }
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>