fix(vue): Fix custom listeners being passed to pages and tabs

This also removes unrecognizedListeners from the root navigator and
tabbar element of the templates. This behaviour is the default already
in Vue 3 so we don't need unrecognizedListeners here.

bindings/vue/vue-onsenui/src/components/VOnsNavigator.vue

@@ -5,8 +5,7 @@
  v-for="page in pageStack"
  :is="page"
  :key="page.key || page.name"
- v-on="unrecognizedListeners"
- v-bind="page.onsNavigatorProps"
+ v-bind="{ ...unrecognizedListeners, ...page.onsNavigatorProps }"
  ></component>
  </slot>
  </ons-navigator>

bindings/vue/vue-onsenui/src/components/VOnsTabbar.vue

@@ -3,13 +3,12 @@
  :on-swipe.prop="onSwipe"
  :activeIndex="index"
  :modifier="normalizedModifier"
- v-on="unrecognizedListeners"
  @prechange.self="$nextTick(() => !$event.detail.canceled && $emit('update:index', $event.index))"
  >
  <div class="tabbar__content">
  <div>
  <slot name="pages">
- <component v-for="tab in tabs" v-bind="tab.props" :is="tab.page" :key="(tab.page.key || tab.page.name || _tabKey(tab))" v-on="unrecognizedListeners"></component>
+ <component v-for="tab in tabs" v-bind="{ ...unrecognizedListeners, ...tab.props }" :is="tab.page" :key="(tab.page.key || tab.page.name || _tabKey(tab))" />
  </slot>
  </div>
  <div></div>

bindings/vue/vue-onsenui/src/mixins/derive.js

@@ -50,10 +50,12 @@ const deriveEvents = elementName => ({
  computed: {
  unrecognizedListeners() {
  const name = camelize('-' + this.$options.name.slice(6));
- return Object.keys(this.$listeners || {})
+ const listeners = Object.fromEntries(Object.entries(this.$attrs)
+ .filter(([attribute, handler]) => /^on[^a-z]/.test(attribute)));
+ return Object.keys(listeners || {})
  .filter(k => (this.$ons.elements[name].events || []).indexOf(k) === -1)
  .reduce((r, k) => {
- r[k] = this.$listeners[k];
+ r[k] = listeners[k];
  return r;
  }, {});
  }