JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui/lib/index.js"></script>
<div id="app">

<template>
  <el-select v-model="selectedRoles" multiple placeholder="Select">
    <el-option v-for="item in availableRoles" :key="item.id" :label="item.name" :value="item.id">
    </el-option>
  </el-select>
</template>
<div>
  {{selectedRoles}}
</div>
<div>
  {{userRoles}}
</div>
</div>

SCSS

@import url("//unpkg.com/element-ui/lib/theme-default/index.css");

Babel + JSX

console.clear()
var Main = {
    data() {
      return {
        availableRoles: [{
          id: 1,
          name: 'Admin'
        }, {
          id: 2,
          name: 'Power User'
        }, {
          id: 3,
          name: 'User'
        }],
        selectedRoles:[1,2]
      }
    },
    computed : {
      userRoles(){
         return this.availableRoles.reduce((selected, role) => {
             if (this.selectedRoles.includes(role.id))
             		selected.push(role);
             return selected;
         }, [])
      }
    }
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')