如何在Vuejs3中删除DOM时停止js setInterval？

<template>
  <div>
    <button @click="startTimer">Start Timer</button>
    <button @click="stopTimer">Stop Timer</button>
  </div>
</template>

<script>
import { ref, onBeforeUnmount } from 'vue';

export default {
  setup() {
    const timer = ref(null);

    const startTimer = () => {
      timer.value = setInterval(() => {
        console.log('Timer is running...');
      }, 1000);
    };

    const stopTimer = () => {
      clearInterval(timer.value);
    };

    onBeforeUnmount(() => {
      clearInterval(timer.value);
    });

    return {
      startTimer,
      stopTimer
    };
  }
};
</script>