Автоматическая прокрутка не работает, framework7 vuejs

Question

Я работаю со следующим шаблоном

https://www.npmjs.com/package/cordova-template-framework7-vue-webpack

У меня есть основной шаблон.

<template>
        <f7-page>
            <toolbarbottom></toolbarbottom>
        </f7-page>
    </template>

в компоненте toolbarbottom.

<f7-toolbar tabbar labels>
     ....
 </f7-toolbar>

            <f7-tabs routable class="tabs-swipeable-wrap">
               <f7-tab id="tab-1"></f7-tab>
               <f7-tab id="tab-2"></f7-tab>
               <f7-tab id="tab-3"></f7-tab>
               <f7-tab id="tab-4"></f7-tab>
               <f7-tab id="tab-5"></f7-tab>
               <f7-tab id="tab-6"></f7-tab>
            </f7-tabs>

каждая вкладка является представлением тогда у меня есть следующий вид, который не генерирует автоматическую прокрутку:

<template>
    <div>
        <div  class="cards"  v-for="(noticia, index) in listado_noticias" :key="index">
            <a @click="leerNota(noticia)" class="card" style="background-image: url('https://source.unsplash.com/E7q00J_8N7A');">
                <f7-card-content :padding="true">
                        <p>{{noticia.titulo}}</p>
                        <span class="badge color-yellow text-color-black">{{noticia.resumen}}</span>
                </f7-card-content>
            </a>
        </div>
        <f7-card expandable>
            <f7-card-content :padding="false">
                <div class="bg-color-yellow" :style="{height: '300px'}">
                <f7-card-header text-color="black" class="display-block">
                    Framework7
                    <br/>
                    <small :style="{opacity: 0.7}">Build Mobile Apps</small>
                </f7-card-header>
                <f7-link card-close color="black" class="card-opened-fade-in" :style="{position: 'absolute', right: '15px', top: '15px'}" icon-f7="close_round_fill"></f7-link>
                </div>
                <div class="card-content-padding">
                <p>Framework7 - is a free and open source HTML mobile framework to develop hybrid mobile apps or web apps with iOS or Android (Material) native look and feel...</p>
                </div>
            </f7-card-content>
        </f7-card>
        <f7-card
        content="This is a simple card with plain text, but cards can also contain their own header, footer, list view, image, or any other element."
        ></f7-card>
    </div>
</template>

Понятия не имею, что может быть

Во всех представлениях происходит одно и то же: прокрутка не появляется автоматически, появляется больше регистров.