SearchToolbar.vue

<template>
    
        <v-container fluid>
          <v-row >
          <v-col>
            <v-select rounded 
                v-model="pos_selected"
                hide-details
                outlined
                dense
                :items="pos_items"
                @input="updatePos">
          </v-select>
          </v-col>
          <v-col>
            <v-select rounded 
                v-model="scope_selected"
                hide-details=""
                outlined
                dense
                :items="scope_items"
                @input="updatePos">
          </v-select>
          </v-col>
          </v-row>
        </v-container>
     
</template>

<script>

export default {
    name: "SearchToolbar",
    data() {
      return { 
        pos_selected: {text: this.$t("pos.ALL") , value: "ALL"},
        pos_items:    ["ALL", "NOUN", "PRON","DET","ADJ","CCONJ","SCONJ", "ADV", "VERB", "INTJ"].map(text =>{
          return {text: this.$t("pos." + text ), value: text}
        }),
        scope_selected: {text: this.$t("scope.w"), value: "w"},
        scope_items: ["w", "f", "wf"].map(text => {
          return {text: this.$t("scope." + text), value: text}
        })
      }
    },
    methods: {
      updatePos (pos) {
        this.$emit('updatePos', pos == 'ALL' ? null : pos)
      },
      updateScope (scope) {
        this.$emit('updateScope', scope)
      }
    }
}
</script>

<style scoped>

.container {
  padding: 10px !important;
  margin-top: 10px;
  min-width: 100%;
}


</style>