VueJS (Buefy): фокус на элементе ввода, когда встроенное редактирование не работает

Question

Я использую VueJS и Buefy для внешнего интерфейса todo. Я добавляю элементы в массив, который отображается в таблице правильно. Я хочу использовать встроенное редактирование, дважды щелкнув элемент (тогда появляется текстовое поле, в котором можно редактировать элемент).

Я делаю это следующим образом:

<div class="content" >
  <b-table :data="todos" :bordered=true>
    <template slot-scope="props">
      <b-table-column v-if="!props.row.editing" @dblclick.native="editTodo(props.row)" field="name" label="Name" width="200" >{{props.row.name}}</b-table-column>
      <b-table-column v-else field="name" label="Name" @keyup.native.enter="doneEdit(props.row)">
         <b-input v-focus v-model="props.row.name" width="200"></b-input>
      </b-table-column>
    </template>
  </b-table>
</div>

Я сохраняю в массиве поле 'edit' и у меня есть метод editTodo и doneEdit

methods: {
    editTodo(obj) {
      obj.editing = true
    },
    doneEdit(obj) {
      obj.editing = false
    },
}

Чтобы сфокусироваться на элементе ввода (при двойном щелчке), я использую пользовательскую директиву следующим образом:

directives: {
  focus: {
    // directive definition
    inserted: function (el) {
      el.focus()
    }
  }
}

Я пробовал много разных решений, но не могу заставить его работать. Любая помощь приветствуется!