Vue Js Generate Random Number

<html>
  <head>
    <script type="importmap">
      {
        "imports": {
          "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
        }
      }
    </script>
    <body>
     <div id="app">
      <h3>Generate Random String in Vue Js</h3>
      <p>Enter Number of Character</p>
      <input  type="number" v-model="strLength">
      <button @click="myFunction">click me</button>
      <p>Random Alphanumeric String = {{randomAlphanumeric}}</p>
     </div>
     <script type="module">
      import { createApp } from 'vue'
      createApp({
      data()
      { 
        return{ 
          alphanumeric:'abcdefghijklmnopqrstuvwxyz0123456789',
          strLength:"",
          randomAlphanumeric:'',
        } 
     }, 
     methods:{
      myFunction(){
        this.randomAlphanumeric = ' ';
        for(var i = 0; i <this.strLength;i++){
        this.randomAlphanumeric += this.alphanumeric.charAt(Math.floor(Math.random()*this.alphanumeric.length))
        }
    
        },

}
      }).mount('#app')
  </script>

</body>
  </head>
</html>