应在哪个窗口/文档事件上初始化组件？

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
    }
  });
});

加载后：“初始化的vue组件” /点击时：“被点击的元素”

---

示例4：$ mount

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

加载后：“初始化的vue组件” /点击时：“被点击的元素”

---

示例5：DOMContentLoaded之后的$ mount

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

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

加载后：“初始化的vue组件” /点击时：“被点击的元素”

---

问题：

• 在初始化时，vue组件是否有所不同？ （DOMContentLoaded与window.loaded）
• 在第一个示例中，单击事件未触发还有其他原因吗？