How to pass data via event from a rendered vue js component to rails view(haml/erb)?

I have rendered a Vue component in a HAML page in rails view.

Configuring the component (Webpacker → date-picker.js)

import Vue from 'vue'
import DatePicker from '../components/DatePicker.vue'

document.addEventListener('DOMContentLoaded', () => {
  const el = document.getElementById("date-time-picker")

  if (!el) {

  const app = new Vue({
    render: h => h(DatePicker)

The date-picker.vue

  <div class="input--date-time-picker">
      <template v-slot="{ inputValue, inputEvents }">
          class="px-2 py-1 border rounded focus:outline-none focus:border-blue-300"

import VCalendar from "v-calendar/lib/components/calendar.umd";
import VDatePicker from "v-calendar/lib/components/date-picker.umd";

export default {
  components: {
  data() {
    return {
      date: new Date(),
  watch: {
    date(newVal, oldVal) {
      this.$emit("input", newVal);

And using the component in HAML template


I am firing an event with date-picker data from the vue component to handle in HAML page, but failing to grabs the event from HAML so that I can use that data using the JS.

I am looking for something like this

  %date-picker @input="handleEvent()"

The syntax seems wrong and it is not working, Is there any good way to handle this?