Prevent HTML from closing with Vue

I’m trying to use Vue to programmatically prevent an HTML dialog element’s close event from closing the dialog. Here’s the code I’m working with:

import {ref} from 'vue';
const dialogTemplateRef = ref();

//I want this toggle to prevent it from closing...
let preventClosing = true;

const closingHandler = function(event){
  //...but it has no effect
  if(preventClosing){
    event.preventDefault();
  } 
}
<button @click="dialogTemplateRef.showModal()">open</button>
<dialog ref="dialogTemplateRef" @close="closingHandler">
  <button @click="dialogTemplateRef.close()">close</button>
</dialog>

Using event.preventDefault() fails to stop the dialog from closing. Using Vue’s event modifiers like .stop or .prevent also appears to have no effect. Is this possible?