在vue3中如何监听dom元素，并对子元素进行操作

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
const observer = ref(null)
function handleMutation(mutationsList) {
  for (let mutation of mutationsList) {
    if (mutation.type === 'childList') {
      for (let addedNode of mutation.addedNodes) {
        if (
          addedNode.nodeType === Node.ELEMENT_NODE &&
          addedNode.className === 'el-icon el-input__icon el-input__clear'
        ) {
          document.querySelector(
            '.search-input .el-input__suffix-inner .el-input__icon'
          ).style.display = 'none'
        }
      }
      for (let removedNode of mutation.removedNodes) {
        if (
          removedNode.nodeType === Node.ELEMENT_NODE &&
          removedNode.className === 'el-icon el-input__icon el-input__clear'
        ) {
          document.querySelector(
            '.search-input .el-input__suffix-inner .el-input__icon'
          ).style.display = 'flex'
        }
      }
    }
  }
}
onMounted(() => {
  const targetNode = document.querySelector(
    '.search-input .el-input__suffix-inner'
  )
  observer.value = new MutationObserver(handleMutation)
  observer.value.observe(targetNode, { childList: true, subtree: true })
})

onUnmounted(() => {
  observer.value.disconnect()
})
</script>