Почему может не срабатывать события focus и blur? framework7

...
     <li class="item-content item-input">
        <div class="item-media">
          <i class="icon demo-list-icon"></i>
        </div>
        <div class="item-inner">
          <!-- <div class="item-title item-label">Word0</div> -->
          <div class="item-input-wrap">
            <textarea id="word2" class="resizable" placeholder="Word2 word2"></textarea>
            <span class="input-clear-button"></span>
          </div>
        </div>
      </li>
...

<script>
  export default (props, { $f7route, $store, $on }) => {
    
    $on('input', (p1) => {
      console.log('input textxarea ' +p1.data+' '+p1.target.id);
    });

    $on('blur', (p1) => {
      console.log('blur' +p1.data+' '+p1.target.id);
    });

    $on('focus', (p1) => {
      console.log('focus' +p1.data+' '+p1.target.id);
    });

    $on('change', (p1) => {
      console.log('change' +p1.target.id);
    });

    return $render;
  };
</script>

События input и change срабатывают, а blur и focus нет. Смотрю в хроме в отладке. В html странице этот же код есть, ошибок никаких при начале редактирования textarea и окончании не показывает.