Strange behavior when used on custom components or root element of components

[deef]

When I try to use v-resize on a component or root node, it will never fire.
However when I do this on the first element inside the root element of a custom component it works fine.

I tried adding the directive globally and in the modules themselves, all give the exact same results

Does not work (inside App.vue):

    <TheAppBar
      :icon="currentViewIcon"
      :caption="currentViewTitle"
      :busy="loading"

      @nav="$refs.nav.toggle()"

      v-resize="appBarResized"
    />

Also does not work on root element of component (inside TheAppBar.vue)

<template>
  <nav class="appbar" v-resize="onResize">
    <div class="row no-gutters">
      <div class="d-print-none col-auto">
        <button class="btn btn-sm btn-outline-secondary" @click="$emit('nav')"><fa-icon icon="bars" fixed-width /></button>
      </div>
      <div v-if="caption" class="col-auto ml-3 lead">
        <MenuIcon :icon="icon" /> {{ caption }}
      </div>
      <div v-if="busy" class="col-auto d-print-none ml-3 lead">
        <fa-icon icon="sync" spin />
      </div>
      <div class="col-auto ml-3 lead">
        <portal-target name="appBar" />
      </div>
    </div>
  </nav>
</template>

Works on first element inside root element of custom component (TheAppBar.vue):

<template>
  <nav class="appbar">
    <div class="row no-gutters" v-resize="onResize">
      <div class="d-print-none col-auto">
        <button class="btn btn-sm btn-outline-secondary" @click="$emit('nav')"><fa-icon icon="bars" fixed-width /></button>
      </div>
      <div v-if="caption" class="col-auto ml-3 lead">
        <MenuIcon :icon="icon" /> {{ caption }}
      </div>
      <div v-if="busy" class="col-auto d-print-none ml-3 lead">
        <fa-icon icon="sync" spin />
      </div>
      <div class="col-auto ml-3 lead">
        <portal-target name="appBar" />
      </div>
    </div>
  </nav>
</template>