getElementById does not work on typescript? it keeps returning null

I have problem dealing with the getElementById.
It keeps returnig null and I don't know what is the cause of this problem
I am currently using vue3, typescript and tailwind css
I am not sure whether I wrote logic wrongly or I have scarce
understandings of typescripts and tailwind css which arouses the problem

Can somebody please help me?

<script setup lang="ts">
import { computed } from 'vue'
import { ref } from 'vue'
import IconSound from '~icons/quill/sound'

const visible = ref(false)

const dragItem = document.querySelector('.item')
const container = document.getElementById('container')
console.log(container)
console.log(dragItem)
</script>

<template>
  <div id="container">
    <button
      class="item bg-gray h-[200px] w-[200px] rounded-full"
      @click="visible = !visible"
    >
      <div class="relative">
        <button
          class="bg-red absolute top-0.5 right-0.5 h-[50px] w-[50px] rounded-full font-bold text-white"
        >
          1
        </button>
      </div>
      <div class="flex justify-center">
        <IconSound class="text-7xl" />
      </div>
    </button>
    <div v-if="visible" class="bg-gray fixed h-96 w-96 overflow-auto">
      <pre>
    z
    z
    z
    z
    z
    z
    z
    z
    z
    z
    z
    z
    z
    z
    z
    z
    z
    z
    z
    z
    z
    z
    z
    </pre
      >
    </div>
  </div>
</template>