[NativeScript-Vue] How listen to RadSideDrawer events

ExampleRadSideDrawer.vue

<!-- Events from: https://docs.telerik.com/devtools/nativescript-ui/api/classes/radsidedrawer.html -->
<template lang="html">
  <RadSideDrawer
    ref="drawer"
    drawerLocation="Left"
    gesturesEnabled="true"
    @drawerOpened="drawerOpened"
    @drawerOpening="drawerOpening"
    @drawerClosed="drawerClosed"
    @drawerClosing="drawerClosing"
    @drawerPan="drawerPan"
  >
    <StackLayout ~drawerContent backgroundColor="#ffffff">
      <slot name="drawerContent"></slot>
    </StackLayout>
    <Frame ~mainContent>
      <slot name="mainContent"></slot>
    </Frame>
  </RadSideDrawer>
</template>

<script>
export default {
  methods: {
    drawerOpened({ eventName, object }) {
      console.log(eventName, ' fired');
    },
    drawerOpening({ eventName, object }) {
      console.log(eventName, ' fired');
    },
    drawerClosed({ eventName, object }) {
      console.log(eventName, ' fired');
    },
    drawerClosing({ eventName, object }) {
      console.log(eventName, ' fired');
    },
    drawerPan({ eventName, object }) {
      console.log(eventName, ' fired');
    },
  },
};
</script>