vue3 setup – how to access ref element in click event

I use vue3 composition API and <script setup> .

<textarea v-model="textarea"></textarea>
<button @click="showPreview">click</button>
<p ref="p" v-if="open"></p>

const textarea = ref("");
const p = ref(null);
const open = ref(false);

function showPreview() {
  let text = textarea.value.replaceAll(/n/g, "<br>");
  if (p.value) { // p is null
    p.value.innerHTML = text;
  }

  open.value = true;
}

I want to show textarea’s text in p tag(not using v-html) when click button.

But p is null in function…

I tried check p variable in onMounted function but it still null.

onMounted(() => console.dir(p))

How can I access ref element when click event?

Thanks in advance for any help.