На каком событии окна / документа должен быть инициализирован компонент?

Question

Небольшой пример компонента (для всех следующих примеров):

<template>
  <div>
    <h1 v-on:click="handleClick">Test</h1>
  </div>
</template>

<script lang="ts">

import { Component, Vue, Prop } from "vue-property-decorator";

@Component
export default class TestComponent extends Vue {
  created() {
    console.log("Initialized vue component");
  }

  public handleClick() {
    console.log("Clicked element");
  }
}
</script>

Разметка элемента в DOM главной страницы, где компонент Vue должен быть загружен в:

<div id="test"></div>

---

Пример 1: создание компонента в main.js без учета каких-либо событий окна / документа:

import Vue from "vue";
import TestComponent from "./TestComponent";
const test = new Vue({
  el: '#test',
  components: {
    'test-component': TestComponent
  }
});

Вывод на консоль:

После загрузки: «Инициализированный компонент Vue» / При щелчке: Ничего

---

Пример 2: Ожидание загрузки окна:

window.addEventListener("load", function(event) {
  const test = new Vue({
    el: '#test',
    components: {
    'test-component': TestComponent
    }
  });
});

После загрузки: «Инициализированный компонент Vue» / При щелчке: «Выбранный элемент»

---

Пример 3: Или дождаться загрузки документа?

document.addEventListener("DOMContentLoaded", function () {
  const test = new Vue({
    el: '#test',
    components: {
      'test-component': TestComponent
    }
  });
});

После загрузки: «Initialize vue component» / On Click: «Clicked element»

---

Пример 4: $ mount

const test = new Vue({
  components: {
    TestComponent
  },
  render: (h) => h(TestComponent),
}).$mount('#test');

После загрузки: «Инициализированный компонент vue» / При щелчке: «Выбранный элемент»

---

Пример 5: $ mount после DOMContentLoaded

const test = new Vue({
  components: {
    TestComponent
  },
  render: (h) => h(TestComponent),
});

document.addEventListener("DOMContentLoaded", function () {
  test.$mount('#test');
});

После загрузки: «Инициализированный компонент Vue» / При щелчке: «Элемент, по которому щелкнули»

---

Вопросы:

• Есть ли разница для компонента vue во время инициализации?(DOMContentLoaded против window.loaded)
• Есть ли еще одна причина, по которой событие click не запускается в первом примере?