Vue Js Array Shift Method

<html>
  <head>
    <script type="importmap">
      {
        "imports": {
          "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
        }
      }
    </script>
   
    <body>
      <div id="app">
        <h2>Vue js Remove first Propert from Object</h2>
        <button @click="myFunction">Remove</button>
          <table>
            <tr>
              <th>S.no</th>
              <th>Device Name</th>
              <th> Price</th>
            </tr>
            <tr v-for="device in devices">
              <td>{{device.s_no}}</td>
              <td>{{device.device_name}}</td>
              <td>{{device.price}}</td>
            </tr>
          </table>
        
   
      
   
    </div>
   <script type="module">
    import { createApp } from 'vue'
      createApp({
      data()
      { 
        return{ 
        devices:[{
                 s_no :1,
                 device_name: 'Desktop',
                 price: '50k'
                 },
                 {
                 s_no :2,
                 device_name: 'Laptop',
                 price: '40K'
                 },
                 {
                 s_no :3,
                 device_name: 'Tablet',
                 price: '30k'
                 },
                 {
                 s_no :4,
                 device_name: 'Mobile',
                 price: '20k'
                 },
        ],
        results:''
        } 
     }, 
     methods:{ 
         myFunction(){ 
            this.results = this.devices.shift(); 
           },
        }
    }).mount('#app')
  </script>

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