Dropdown model-list-select: список не работает в Popup Model

Question

Я использовал раскрывающийся ввод в всплывающей модели и назначил значение массива в : list="conopt". Когда я выбираю опцию, я получаю название страны, но я ожидал массив, который имеет id, name и sortname.

Когда я поместил этот выпадающий список вне всплывающей модели, я получил ожидаемый результат. Но проблема в том, что я хочу получить этот результат во всплывающей модели.

// Использование выпадающего списка в всплывающей модели (работает не так, как ожидалось)

<div>
<b-model title="Add Supplier" hide-footer size="lg" v-model="largeModal" @ok="largeModal = false" style="width: 140%; margin: auto;">
<model-list-select :list="conopt" class="form-control"
    option-value="country_name"
    option-text="country_name"
    v-model="con"
    @input="state">
</model-list-select >
</b-model>
</div>

<script type="text/javascript">
    state(conopt){
       console.log(conopt) // Result India (Expecting array output)
    }
</script>

Использование выпадающего списка вне всплывающей модели (работает должным образом)

<div>
    <model-list-select :list="conopt" class="form-control"
        option-value="country_name"
        option-text="country_name"
        v-model="con"
        @input="state">
    </model-list-select >
</div>

<script type="text/javascript">
    state(conopt){
       console.log(conopt)
       /*
       GETTING EXPECTED RESULT
       {__ob__: Observer}
          country_name:"India"
          id:"45"
          phonecode:"91"
          sortname:"IN"
       */
    }
</script>