I've created my own SelectMenu Vue component that wraps the vue-select package select menu component so that I can get a more streamlined ui flow.

My reusable component looks like so:

<v-select 
  :appendToBody="append"  
  filterable 
  :multiple="multiple"
  :label="label" 
  :placeholder="placeholder" 
  :options="options" 
  :autocomplete="autocomplete" 
  :reduce="option => option.id" 
  @input="selected" 
  v-model="model" />

This works perfectly except when the options key needs to be something other than id

append multiple label placeholder options are all passed into the component as props and I'd like to pass in the option key to use as well.

:reduce="option => option.{passed in key}"

I set a prop called reducer for lack of a better name:

reducer: {
  type: String,
  default: 'id'
}

I tried concatenating it:

:reduce="option => `option.${reducer}`"

But of course this produces a string of "option.id" or whatever the reducer prop is.

How can I set this so it'll be interpreted as javascript?