Reactivity on Array mutation | property observation

[t3ndai]

<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer></script>
<div x-data="{urls: previewFiles()}">
    <template id="preview" x-for="url in urls" :key="url">
        <span x-text=url></span>
        <img :src="url" />
    </template>
</div>
<div>
  <input type="file" multiple id='upload' />
</div>
    <script>
      
      const upload = document.getElementById('upload')
      let urls = []
     

        function handleFiles() {
            const files = upload.files
            for (const file of files) {
                //if (!file.type.startsWith('/image')) { continue}
                url = window.URL.createObjectURL(file)
                urls = urls.concat([url])
                
            }
          return previewFiles()
          
        }
      
        upload.addEventListener('change', handleFiles, false)
        
        

        function previewFiles() {
            console.log(urls)
            return urls
        } 
    </script>

trying to preview images uploaded by user. have used vue | react before, & alpine looks like a good lightweight library. however, I can't wrap my head around on how mutation is made or how properties are observed.

if you stick that snippet in a pen, you'll see the array is updated. however alpine doesn't pick up on the changes.