Vue-loader dynamic list of components

I am quite new to Vue.js and got stuck at a problem that shouldn't be too hard to solve: I have a single file component (.vue) that is supposed to view/manage a dynamic list of another single file component via JS.

My approach is this:

<script>
import Event from './DayView/Event'
export default {
  components: {
    Event
  },
  props: ['day']
}

const $ = window.$ = require('jquery')
$(document).ready(function () {
  $('#day-view').append(new Event())
})
</script>

This results in the following error:

Uncaught TypeError: __WEBPACK_IMPORTED_MODULE_0__DayView_Event___default.a is not a constructor

Thanks in advance.

I found a solution for my problem (which isn't neccessarily mounting new objects). As DayView is supposed to view a list of Events, using a list of objects combined with v-for did the trick for me:

<template>
  <div id="day-view">
    [...]
    <event v-for="event in events" :event="event"></event>
  </div>
</template>

<script>
import Event from './DayView/Event'

let events = []

export default {
  components: {
    Event
  },
  data () {
    return {
      events: events
    }
  }
}

const $ = window.$ = require('jquery')
$(document).ready(function () {
  events.push({start: '540', end: '630'})
})
</script>