vue页面中使用getElementsByClassName无法获取元素的解决

<template>
  <div id="tjContainer">
    <div v-if="state.water" class="tj-container">内容一</div>
    <div v-if="state.zone" class="tj-container">内容二</div>
    <div v-if="state.red" class="tj-container">内容三</div>
  </div>
</template>

<script setup>
const state = reactive({
  targ: "",
  water: false,
  zone: false,
  red: false,
});

const showOrHide = (targ, status) => {
  state.targ = targ;
  const t = targ.toLowerCase();
  if (t === "water") state.water = status;
  else if (t === "zone") state.zone = status;
  else if (t === "red") state.red = status;

  nextTick(() => {//nextTick，不一定要用在onMounted里
    dragInit();
  });
};
const show = (targ) => {
  showOrHide(targ, true);
};
const hide = (targ) => {
  showOrHide(targ, false);
};
defineExpose({ show, hide });//外部可以调用这两个方法

function dragInit() {
  const dom = document.getElementById("tjContainer");
  const els = dom.getElementsByClassName("tj-container");
  if (els.length === 0) {
    console.log("找不到class='tj-container'的元素");
    return;
  }
  const drag = els[0];
  //大展宏图，吧啦吧啦吧啦
}
</script>