Vue v-on: фокус не отвечает

Question

Я пытаюсь определить, почему событие фокуса, вызванное в родительском компоненте для одного из его непосредственных дочерних элементов, не отвечает. У меня есть два компонента для создания радиовхода.

1. Обертка - родительский
2. Параметры - дочерние (несколько)

В компоненте оболочки есть - это метка, и при ее нажатии я хочу, чтобы фокусировался первый компонент параметра.

//html of wrapper
<label
        v-if="label"
        for=""
        v-bind:style="labelStyle"
        v-on:click.prevent="focusInput"
      >
        {{ label }}
      </label>

//Method of wrapper
focusInput() {
  if (!this.disabled) {
    this.$nextTick(() => {
      let el = this.$children[0].$refs.option
      //If i console.log(el) i can see the correct object
      if (el) el.focus() 
    })
  }
},

Компонент параметра настраивается с помощью ссылки и прослушивателя

  <span
    v-bind:style="styleCircle"
    v-on="listeners" --> computed property below
    ref="option"
    tabindex="0"
  >
    <icon></icon>
  </span>

//Computed property
listeners() {
  return {
    ...this.$listeners,
    click: event => {
      if (!this.dis) {
        this.isFocus = false
        if (this.$parent.emit) {
          this.$parent.emit(this.value)
        } else {
          this.$emit('input', this.value)
        }
      }
    },
    focus: event => {
      console.log(event)  //When i click the label in the parent component(wrapper comp.) this is never called
      if (!this.dis) {
        this.isFocus = true
      }
    },
    blur: event => {
      if (!this.dis) {
        this.isFocus = false
      }
    },
    keyup: event => {
      event.preventDefault()
      if (event.which == 9) {
        this.navigateOptions(this)
      }
    }
  }
},

Ничего не происходит с прослушиватель фокуса первого дочернего элемента при щелчке по метке. Я играл с $nextTick, но это тоже не помогло.

Я изменил focus() на click() и щелчок listener сработал

Что такое Я пропал?