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

#1

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) {
    return
  }

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

The date-picker.vue

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

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

export default {
  components: {
    VCalendar,
    VDatePicker,
  },
  data() {
    return {
      date: new Date(),
    };
  },
  watch: {
    date(newVal, oldVal) {
      this.$emit("input", newVal);
    },
  },
};
</script>

And using the component in HAML template

#date-time-picker
  %date-picker

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-time-picker
  %date-picker @input="handleEvent()"

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