Component router is not updated in mobile devices

Hello,

I’m starting from scratch in frontend development as well as F7.
I have a chunk of code that reads from a json object and adds tabs to the page from it.

The point is that from Desktop everything is working fine but not in mobile devices.

{
path: ‘/test/’,
component: {
template: `
Equipos


Opposite Side


            {{#each teams}}
            <li class="accordion-item">
             <a class="item-content item-link" href="#">
                <div class="item-inner">
                  <div class="item-title">{{this}}</div>
                </div>
              </a>
              <div class="accordion-item-content">
                <div class="block">
                  <p>1. Lorem ipsum dolor sit amet...</p>
                </div>
              </div>
            </li>
            {{/each}}

          </ul>
        </div>
      </div>
    </div>
  `,
    data: function () {
    return {
      teams: null, //['item1', 'item2'],
    }
  },
  on: {
    pageInit: function () {
      var self = this;
      var app = self.$app;
      // get data from http
      app.request.json('https://www.filltext.com/?rows=2&fname={firstName}&lname={lastName}&pretty=true', (data) => {

        var i;
        var localTeams = [];

        for(i = 0; i < data.length; i++){
          localTeams.push(data[i].fname);
        }

self.$setState({
teams: localTeams,
});

      });
    },
  },
},

},

Any clue?

Thanks in advance!
Regards,