so I have this weird problem, I'm trying to bind a HTML element to my ref in my store.ts file. In script setup the ref logs null, but when I use the regular setup(){} it does work. I think my ref isn't getting exposed to the template. What seems to be the issue?

app.vue

<template>
  <div ref="elementRef">
  <p>Child of ref</p>
  </div>
  <button @click="doSomeShit">Test</button>
</template>
<script setup lang="ts">
import {ref, defineComponent} from 'vue'
import {elementRef} from './store/store'

    const doSomeShit = () => {
      console.log(elementRef.value)
    }
</script>

store.ts

import {ref} from 'vue'

export const elementRef = ref<Maybe<HTMLElement>>(null)

interface Maybe<T> {
    T: T | null
}

But this does work

<template>
  <div ref="elementRef"  class="h-48 ">
  <p>Child of ref</p>
  </div>
  <button @click="doSomeShit">Test</button>
</template>


<script lang="ts">
import {ref, defineComponent} from 'vue'
import {elementRef} from './store/store'

export default defineComponent({
  setup(){
    const doSomeShit = () => {
      console.log(elementRef.value)
    }


  return{
    doSomeShit,
    elementRef
  }
  }
})
</script>