Vue Setinterval and Clearinterval

<html>
<head>
    <script type="importmap">
      {
        "imports": {
          "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
        }
      }
    </script>
<body>
    <div id="app">
        <h3>Vue Js clearInterval Method</h3>
        <p>Counter: {{ counter }}</p>
        <button @click="startCounter">Start Counter</button>
        <button @click="stopCounter">Stop Counter</button>
    </div>
    <script type="module">
        import { createApp } from "vue";
        createApp({
            data() {
                return {
                    counter: 0,
                    intervalId: null // To hold the interval ID
                };
            },
            methods: {
                startCounter() {
                    this.intervalId = setInterval(() => {
                        this.counter++;
                    }, 1000);
                },
                stopCounter() {
                    clearInterval(this.intervalId);
                }
            },
            beforeUnmount() {
                clearInterval(this.intervalId);
            }
        }).mount("#app");
    </script>
</body>
</head>
</html>