Mapping Array not working

Questions
1

Hi, i can’t use the Mapping Array i changed the code to the new version and i’m using fetch but not working any help please ?
Below my pending-orders.html page i’m using core js

<div class="page" data-name="pending-orders">
      <div class="navbar">
        <div class="navbar-bg"></div>
        <div class="navbar-inner sliding">
          <div class="title">Pending Orders</div>
        </div>
      </div>
      <div class="page-content">
  
        <div class="block-title">Orders Pending Your Attention !</div>
        <div class="list">
          <ul>
            
            ${list.value.map(i => $h`
  
              <li class="swipeout">
                <div href="#" class="item-content swipeout-content">
                  <!-- <div class="item-media"><i class="icon icon-f7"></i></div> -->
                  <div class="item-inner">
                    <div class="item-title">
                      <div class="item-header">${i.code}</div> 
                    </div>
                    <div class="item-after">${i.collection_point_id.complete_address} <b> ( ${i.collection_point_id.point_code} ) </b> </div>
                  </div>
                </div>
                <div id="code"></div>
                <div class="swipeout-actions-left">
                </div>
                <div class="swipeout-actions-right">
                  <a href="/orders/accepte/${i.id}"  class="swipeout-delete color-green">Accepte</a>
                    <a href="/order-details/${i.code}" class="swipeout-accepte color-orange">Order Details</a>
                </div>
              </li>
              `)}
  
          </ul>
        </div>
      </div>
    </div>
  
  <script>
    export default (_, { $f7, $ref, $onMounted }) => {
        const list = $ref([]);

    fetch(window.env.API_URL + '/records/collection_orders?join=collection_points&filter=is_accepted,neq,1', {
        headers: {
        'X-API-Key': '123456'
        }
  })
  .then((response) => response.json())
  .then((data) => {
    list.value = data['records'];
  })
  .catch((error) => {
    console.error('Error fetching data:', error);
  });

    setInterval(() => {
        fetch(window.env.API_URL + '/records/collection_orders?join=collection_points&filter=is_accepted,neq,1', {
        headers: {
            'X-API-Key': '123456'
        }
    })
    .then((response) => response.json())
    .then((data) => {
      list.value = data['records'];
      // Show a light every refresh
      $f7.toast.show({ text: "Data Refreshed" });
    })
    .catch((error) => {
      console.error('Error fetching data:', error);
    });
}, 5000);

  
  
      return $render;
    };
  </script>
2

Solved i forgot to change url to ComponentUrl in routes.js

  {
    path: '/pending-orders/',
    **componentUrl**: './pages/pending-orders.html',
  }