Vue Js Validate Image Upload

<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <h3>Vue Js Validate Image Upload </h3>
    <div id="app">
        <input type="file" ref="fileInput" @change="validateImage" />
        <p style='color:green' v-if="success">{{success}}</p>
        <p style='color:red' v-for="error in errors">{{error}}</p>
    </div>
    <script type="module">
        const app = new Vue({
            el: "#app",
            data() {
                return {
                    errors: [],
                    success: null
                };
            },
            methods: {
                validateImage() {
                    let file = this.$refs.fileInput.files[0];
                    let allowedTypes = ['image/jpeg', 'image/png', 'image/gif'];
                    this.errors = [];

if (!file) {
                        this.errors.push('Please select an image file');
                        return;
                    }

if (!allowedTypes.includes(file.type)) {
                        this.errors.push('Invalid file type. Only jpeg, png, and gif are allowed.');
                    }

if (file.size > 500000) {
                        this.errors.push('File size too large. Maximum size is 500KB.');
                    }

let image = new Image();
                    let reader = new FileReader();

reader.onload = (e) => {
                        image.src = e.target.result;

image.onload = () => {
                            if (image.width < 100 || image.height < 100) {
                                this.errors.push('Image resolution too low. Minimum size is 100x100.');
                            }

if (this.errors.length === 0) {
                                this.success = 'Image validated successfully'
                            }
                        };
                    };

reader.readAsDataURL(file);
                }
            }
        })
    </script>
</body>
</html>