Расширение фокуса ввода на значок, чтобы можно было нажимать

Question

У меня есть компонент выбора даты (v-date-picker), и я не могу получить значок, который представляет собой Font Awesome Icon, отдельный от средства выбора даты, чтобы открыть календарь в фокусе (то есть при нажатии), япопробовал решения, описанные здесь: Как увеличить кликабельную область кнопки тега ? Не повезло, это должно быть просто, но просто не работает.

<template>
    <div class="v-date-picker">
      <v-date-picker
        mode="single"
        :value="date"
        @input="emit"
        :placeholder="placeholder"
        popoverVisibility="focus"
        v-bind="$attrs"
        :max-date="maxDate"
        :min-date="minDate"
      >
      </v-date-picker>

      <font-awesome-icon v-bind="$attrs" :icon="['far','calendar']" />
    </div>
</template>
//skip all my code here....
<style lang="scss">
.v-date-picker {
    position:relative;
  input {
    height: 36px;
    display: block;
    border: 1px solid #f3f3f3;
    padding: 8px 12px;
    font-size: 14px;
    background: #f3f3f3;
    box-shadow: 0 0 0 #EAEAEA;
    width: 100%;
    transition: all .3s ease-in-out;
    border-radius: 4px;

    &:hover {
      border-color: #ddd;
      box-shadow: none;
    }

    &:focus {
      border-color: #ea7d1c;
      box-shadow: none;
    }
    }
}

  input::-webkit-input-placeholder { color: #ccc;}
  input::-webkit-input-placeholder { color: #ccc;}
  input::-moz-placeholder { color: #ccc;}
    input:-ms-input-placeholder { color: #ccc;}

.fa-calendar {
  position: absolute;
  right: 10px;
  top: 10px;
    font-size: 16px;
    color: #666;
}
.date-picker .vdp-datepicker__calendar .cell.selected,
.date-picker .vdp-datepicker__calendar .cell.selected.highlighted,
.date-picker .vdp-datepicker__calendar .cell.selected:hover {
    background: #ea7d1c;
        color: white;
}
.date-picker .vdp-datepicker__calendar .cell:not(.blank):not(.disabled).day:hover,
.date-picker .vdp-datepicker__calendar .cell:not(.blank):not(.disabled).month:hover,
.date-picker .vdp-datepicker__calendar .cell:not(.blank):not(.disabled).year:hover {
    border-color: #ea7d1c;
}
</style>

Answer 1

Переслать событие click для средства выбора даты (для которого здесь стоит моя кнопка):

new Vue({
  el: '#app',
  methods: {
    forward(event) {
      const b = this.$refs.dp;

      b.dispatchEvent(new MouseEvent(event.type, event));
    },
    action() {
      alert('Date picker!');
    }
  }
});

button {
  margin-top: 4rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js">
</script>
<div id="app">
  <div @click="forward">Click me</div>
  <button ref="dp" @click="action">Not me</button>
</div>