Vue Js Get Dimensions/Size of Image

<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <h3>Vue Js get size of Image </h3>
    <div id="app">
         <p>Height of Image:{{height}}px</p>
        <p>Width of Image:{{width}}px</p>
        <img ref="image" :src="url" @load="getImageSize">

</div>
    <script type="module">
        const app = new Vue({
            el: "#app",
            data() {
                return {
                    url: 'https://www.sarkarinaukriexams.com/images/post/1670773657Capture--42343254324.PNG',
                    height: '',
                    width: '',

};
            },
            methods: {
                getImageSize() {
                    const img = new Image();
                    img.src = this.$refs.image.src;
                    img.onload = () => {
                        this.width = img.width;
                        this.height = img.height;
                    };
                }
            },
        });
    </script>
</body>
</html>