I’ve recently started using Vue3 after a couple year gap and have opted for the Composition API.

The issue I have is with the 2 event listeners in the onMounted function.

This is what I get for the first event listener

Uncaught TypeError: Cannot set properties of undefined (setting
‘width’)
at HTMLDivElement.

This is the error I get for the second event listener

Uncaught TypeError: Cannot read properties of undefined (reading
‘contains’)
at HTMLDivElement.

and this is the extract of my code that causing the problem

<script setup>
  import { defineProps, ref, onMounted } from 'vue'
  import { useEventListener } from '@vueuse/core'

  const waveForm = ref(null)
  const hover = ref()
  const mainCover = ref(null)

  onMounted(() => {
    useEventListener(waveForm, 'pointermove', (evt) => {
      hover.style.width = `${evt.offsetX}px`
    })

    useEventListener(mainCover, 'click', (e) => {
      if (mainCover.classList.contains("active")) {
        mainCover.classList.remove("active");
        mainCover.classList.add("inactive");
      } else {
        mainCover.classList.remove("inactive");
        mainCover.classList.add("active");
      }
    })
  })

</script>

<template>
  <div>
    <div ref="mainCover" id="main_cover">
    </div>
  </div>
  <div ref="waveForm" id="waveform">
    <div ref="hover" id="hover"></div>
  </div>>
</template>