Extracted Users filter as a single file component

src/views/users/components/UsersFilter.vue

@@ -0,0 +1,43 @@
+<template>
+  <el-select v-model="value" placeholder="Select filter">
+    <el-option-group
+      v-for="group in filters"
+      :key="group.label"
+      :label="group.label">
+      <el-option
+        v-for="item in group.options"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value"/>
+    </el-option-group>
+  </el-select>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      filters: [{
+        label: 'By user type',
+        options: [{
+          label: 'Show local',
+          value: 'showLocal'
+        }, {
+          label: 'Show external',
+          value: 'showExternal'
+        }]
+      }, {
+        label: 'By status',
+        options: [{
+          label: 'Show Active',
+          value: 'showActive'
+        }, {
+          label: 'Show Deactivated',
+          value: 'showDeactivated'
+        }]
+      }],
+      value: ''
+    }
+  }
+}
+</script>

src/views/users/index.vue

@@ -2,7 +2,8 @@
   <div class="users-container">
     <h1>{{ $t('users.users') }}</h1>
     <div class="search-container">
-      <el-checkbox :value="showLocalUsersOnly" @change="handleLocalUsersCheckbox">{{ $t('users.localUsersOnly') }}</el-checkbox>
+      <users-filter/>
+      <!-- <el-checkbox :value="showLocalUsersOnly" @change="handleLocalUsersCheckbox">{{ $t('users.localUsersOnly') }}</el-checkbox> -->
       <el-input :placeholder="$t('users.search')" class="search" @input="handleDebounceSearchInput"/>
     </div>
     <el-table v-loading="loading" :data="users" style="width: 100%">
@@ -93,9 +94,13 @@
 
 <script>
 import debounce from 'lodash.debounce'
+import UsersFilter from './components/UsersFilter'
 
 export default {
   name: 'Users',
+  components: {
+    UsersFilter
+  },
   computed: {
     loading() {
       return this.$store.state.users.loading