Bug Type: Component

Environment

• Vue Version: 3.2.37
• Element Plus Version: 2.2.18
• Browser / OS: Chrome
• Build Tool: Vite

Reproduction

Related Component

• el-backtop

Reproduction Link

Element Plus Playground

Steps to reproduce

<script setup lang="ts">
import { ref, version as vueVersion } from 'vue'
import { version as EpVersion, ElBacktop } from 'element-plus'

const msg = ref('Hello World!')
</script>

<template>
  <p>
    <el-icon color="var(--el-color-primary)"><ElementPlus /></el-icon>
    Element Plus {{ EpVersion }} + Vue {{ vueVersion }}
  </p>
  <div id="doc-editor-main" style="height: 30vh; overflow: auto">
  	<div style="height: 200vh; background: rgba(0,0,0,0.3)">
  		<el-backtop target="#doc-editor-main" :right="100" :bottom="100" />
  	</div>
  </div>
  
  <div id="doc-editor-main" style="height: 30vh; overflow: auto">
  	<div style="height: 200vh; background: rgba(0,0,255,0.3)">
  		<el-backtop target="#doc-editor-main" :right="100" :bottom="100" />
  	</div>
  </div>
  
  <div id="doc-editor-main" style="height: 30vh; overflow: auto">
  	<div style="height: 200vh; background: rgba(255,0,0,0.3)">
  		<el-backtop target="#doc-editor-main" :right="100" :bottom="100" />
  	</div>
  </div>
</template>

假设3个 id 相同的 div 为组件，循环复用后，返回顶部只有第一个生效。

What is Expected?

target 属性不应该用 querySelector 去查询触发滚动的对象，应该用 ref 去查询触发滚动的对象。

What is actually happening?

target 属性用 querySelector 去查询触发滚动的对象，从而导致 id 相同时候只有第一个生效。

Additional comments

(empty)