Как сделать компонент autocomplete более универсальным?

<template>
<div>
  <p>Try typing <em>draw</em> or <em>fill</em></p>
  <input id="autocomplete" type="text"
    :value="value"
    @input = "updateValue($event.target.value)"
    @blur = "updateValue()"
  />
  <div id="autocomplete_result" v-show="open">
    <p v-for="(item, index) in values"
       :key="item.id"
       @click="select(index)"
    >
      <img :src="item.img" alt="">
      <span>{{ item.title }}</span>
      <span v-if="desc">{{ item.desc }}</span>
    </p>
  </div>
</div>
</template>

<script>
export default {
  name: 'Autocomplete',
  props: {
    value: {
      type: String,
      default: ''
    },
    getItems: {
      type: Function
    },
    desc: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      open: false,
      values: []
    }
  },
  methods: {
    updateValue (value) {
      this.open = true
      this.getItems().then(result => {
        this.values = result
      })
      this.$emit('input', value)
    },

    select (index) {
      this.$emit('input', this.values[index].title + ' ' + this.values[index].desc)
      this.open = false
    }
  }
}
</script>

сейчас при выборе нужного элемента в инпут эмитится this.$emit('input', this.values[index].title + ' ' + this.values[index].desc), но, допустим, на другой странице описание не нужно. Как сделать так, чтобы эмитились только нужные свойства объекта данных?