Vue组件中循环内addEventListener无法正常工作的问题咨询

各位大佬好，我最近开发Vue项目时遇到了个头疼的问题——我写了一个用来切换密码显示/隐藏的组件，单独使用时完全正常，但把它放到v-for循环里渲染后，点击图标触发切换的功能就失效了，点击完全没反应，控制台也没报错，实在找不到问题出在哪，想请大家帮忙看看。

先贴一下我的组件代码：

<template>
  <span :data-target="target" class="input-icon">
    <slot></slot>
  </span>
</template>

<script>
export default {
  name: "InputIcon",
  props: {
    target: String,
  },
  mounted() {
    let showHidePassword = function (selector) {
      let elem = document.querySelectorAll(selector);
      elem.forEach((item) => {
        item.addEventListener("click", function (e) {
          e.preventDefault();
          let target = document.getElementById(
            item.getAttribute("data-target")
          );
          if (target.type == "password") {
            target.type = "text";
            item.classList.add("shown");
          } else {
            target.type = "password";
            item.classList.remove("shown");
          }
        });
      });
    };

    showHidePassword(".password-toggle");
  },
};
</script>

我在父组件里是这样循环使用这个组件的：

<template>
  <div v-for="(field, index) in passwordList" :key="index">
    <input :id="`password-input-${index}`" type="password" v-model="field.value" />
    <InputIcon 
      :target="`password-input-${index}`" 
      class="password-toggle"
    >
      <i class="fa fa-eye"></i>
    </InputIcon>
  </div>
</template>

单独使用一个InputIcon组件时，点击图标能正常切换输入框的密码显示状态，但一放到循环里，所有图标点击都没反应了。我猜测是不是mounted钩子执行的时候，循环里的元素还没完全渲染？或者是事件绑定的方式有问题？有没有朋友遇到过类似的情况，能给我点思路吗？

备注：内容来源于stack exchange，提问作者Erjan Kydyrov