var Main = { data() { return { drawer: { form: { period: null } }, data : [ { label: "JAN to MAR 2021", value: "1", current: true }, { label: "Apr to Jun 2021", value: "2", current: false }, { label: "Jul to Sep 2021", value: "3", current: false }, { label: "Oct to Dec 2021", value: "4", current: false } ] } }, computed: { isCurrent() { return this.data.find(item => item.value === this.drawer.form.period)?.current; } }, methods: {} } var Ctor = Vue.extend(Main); new Ctor().$mount('#app');

 @import url("//unpkg.com/element-ui@2.4.4/lib/theme-chalk/index.css"); .capsule { background: #e6e9f0; border-radius: 7.5px; height: 15px; line-height: 15px!important; color: #04246a; font-size: 10px; text-align: center; display: inline-block; padding: 0 6px; letter-spacing: .5px; text-transform: uppercase; max-width: 100%; text-overflow: ellipsis; overflow: hidden; word-break: normal; word-wrap: normal; } .el-input--prefix .el-input__inner { padding-left: 15px; padding-right: 60px; } .el-input__prefix { right: 25px; left: initial; display: flex; align-items: center; }

 <script src="//unpkg.com/vue/dist/vue.js"></script> <script src="//unpkg.com/element-ui@2.4.11/lib/index.js"></script> <div id="app"> <el-select v-model="drawer.form.period" value-key="value"> <el-option v-for="item in data" :key="item.value" :label="item.label" :value="item.value"> <span>{{ item.label }}</span> <div v-if="item.current" class="capsule secondary" >Current</div> </el-option> <template slot="prefix"> <div v-if="isCurrent" class="suffix capsule secondary">Current</div> </template> </el-select> </div>