Allows tag edition in buefy taginput

Question

I'm using buefy's b-taginput component and I'd like to enable tag editing once they've been added. So I've created a component to display or edit a tag:

<template>
  <b-tag
   :closable="true"
   @close="$emit('close')"
   @click="click($event)"
  >
    <input
      v-show="displayInput"
      type="text"
      v-model="tag.name"
      ref="mytaginput"
      @blur="displayInput = false"
      :size="tag.name.length > 1 ? tag.name.length - 1 : 1"
      :style="{
        'border': 'solid',
        'border-color': '#3a3a3a',
        'border-width': '1.5px'
      }"
    />
    <span
      v-show="!displayInput"
    >
      {{ tag.name }}
    </span>
  </b-tag>
</template>

<script>
const DELAY = 500

export default {
  props: {
    editable: {
      type: Boolean,
      default: false
    },
    tag: {
      type: Object,
      default: function () {
        return {name: ''}
      }
    }
  },
  data () {
    return {
      nclicks: 0,
      timer: null,
      displayInput: false
    }
  },
  methods: {
    click: function (event) {
      if (this.editable) {
        this.nclicks++
        if (this.nclicks === 1) {
          let self = this
          this.timer = setTimeout(function () {
            self.nclicks = 0
          }, DELAY)
        } else {
          clearTimeout(this.timer)
          this.displayInput = true
          this.$refs.mytaginput.focus()
          this.nclicks = 0
        }
      }
    }
  }
}
</script>

I use it this way :

<b-taginput
  :allow-new="true"
  autocomplete
>
  <template #selected="props">
    <my-tag
      v-for="(tag, index) in props.tags"
      :key="index"
      :tag="tag"
      :editable="true"
    />
  </template>
</b-taginput>

When I double-click on the tag, the tag's input does not take focus. I think this is because the focus remains on the b-taginput. I've tried forcing it, without success. Do you have any idea how to enable tag editing?