Vue Js Generate Random IP Addresss

<!DOCTYPE html>
<html>
<head>
   <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
	<h4>Vue.js Generate Random IP Address</h4>
	<div id="app">
        <button @click="generateRandomIPAddress">Generate</button>
		<p v-if="ipAddress">{{ ipAddress }}</p>
		<p v-else>Click "Generate" to generate a random IP address</p>
    </div>
	<script type="module">
		const app = Vue.createApp({
			data() {
				return {
					ipAddress: "",
				}
			},
			methods: {
				generateRandomIPAddress() {
					let ip = [];
					for (let i = 0; i < 4; i++) {
						ip.push(Math.floor(Math.random() * 256));
					}
					if (this.isValidIPAddress(ip)) {
						this.ipAddress = ip.join(".");
					} else {
						this.generateRandomIPAddress();
					}
				},
				isValidIPAddress(ip) {
					if (ip.length !== 4) {
						return false;
					}
					for (let i = 0; i < 4; i++) {
						if (ip[i] < 0 || ip[i] > 255 || isNaN(ip[i])) {
							return false;
						}
					}
					return true;
				},
			},
        });
		app.mount('#app');
	</script>
</body>
</html>