关于Vue.js中getElementById().addEventListener使用的问题

Question

问题遇到的现象和发生背景

在使用addEventListener时, 发现在Vue模板外为Vue实例添加的监听操作无效

按照以下代码的执行结果, 我现在的理解就是, 对Vue实例(下图id2区域)的事件监听, 监听代码得放在Vue模板中
而对非Vue实例(下图id1区域)的事件监听, 监听代码不管放在Vue模板里面还是外面, 都不影响执行

问题相关代码，请勿粘贴截图

<div style="display: flex">
    <div id="id1">id1</div>
    <div id="app">
        <div id="id2">id2</div>
    </div>
</div>

<script src="../js/vue.js"></script>
<script type="text/javascript">
  function func1(id, log) {
    document.getElementById(id).addEventListener('click', function() {
      console.log('click ', id, log);
    })
  }

  func1('id1', ' out');  // 有效
  func1('id2', ' out');  // 无效

  const app = new Vue({
    el: "#app",
    created() {
      func1('id1', ' created');  // 有效
      func1('id2', ' created');  // 无效
    },
    mounted() {
      func1('id1', ' mounted');  // 有效
      func1('id2', ' mounted');  // 有效
    }
  })
</script>

运行结果及报错内容

分别点击id1区域和id2区域, 得到的执行情况如下

我的解答思路和尝试过的方法

按照以上代码的执行结果, 我现在的理解就是, 对Vue实例(上图id2区域)的事件监听, 监听代码得放在Vue模板中
而对非Vue实例(上图id1区域)的事件监听, 监听代码不管放在Vue模板里面还是外面, 都不影响执行

我想要达到的结果

Answer 1

vue生命周期中created时this被初始化，模板未被挂载，所以created中的id2拿不到；mounted时模板已被挂载，所以id2可以拿到；写在外面感觉也是因为模板未挂载的原因，导致id2拿不到