下拉模型列表选择：列表在弹出模型中不起作用

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>