Framework7 Buttons error

by Maiki Nahara

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/5.4.5/css/framework7.bundle.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/framework7/5.4.5/js/framework7.bundle.js"></script>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="theme-color" content="#2196f3">
  <title>My App</title>
</head>

<body>
  <div id="app">
    <div class="popup my-awesom-popup">

      <div class="view popup-panel-view">
        <div data-name="popup-home" class="page">
          <div class="page-content">
            <div class="list links-list">
              <ul>
                <li><a href="/popup-home/" data-view=".popup-page-view">Popup Home</a></li>
                <li><a href="/link2/" data-view=".popup-page-view">Link 2</a></li>
                <li><a href="/link3/" data-view=".popup-page-view">Link 3</a></li>
                <li><a href="#" data-popup=".my-awesom-popup" class="popup-close" >Close popup</a></li>
              </ul>
            </div>
          </div>
        </div>
      </div>

      <div class="view popup-page-view">
      </div>
    </div>
    <div class="view view-main">
      <div data-name="home" class="page">
        <div class="page-content">
          <div class="block">
            <div class="row">
              <button class="col button button-outline open-popup-btn">Open popup</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

SCSS

.my-awesom-popup, .my-awesom-popup.popup.modal-in {
  display: flex;
}
.popup-panel-view {
  --f7-list-margin-vertical: 0;
  min-width: 30vw;
  max-width: 30vw;
  height: 100%;
}
.popup-page-view {
  --f7-list-margin-vertical: 0px;
  min-width: 70vw;
  max-width: 70vw;
  height: 100%;
}

JavaScript

var app = new Framework7({
  // App root element
  root: '#app',
  // App Name
  name: 'Pull To Refresh Demo',
  // App id
  id: 'com.myapp.test',
  // Enable swipe panel
  panel: {
    swipe: 'left',
  },
  theme: 'ios',
  // Add default routes
  routes: [{
    path: '/about/',
    url: 'about.html',
  }, ],
  methods: {
  	myFnc () {
			let vm = this
      vm.dialog.alert('Hello world!');
      app.popup.open('.my-awesom-popup')
    }
  }
  // ... other parameters
});
var $$ = Dom7;
var mainView = app.views.create('.view-main');

var popupPanelView = app.views.get('.popup-panel-view')
var popupPageView = app.views.get('.popup-page-view')

if (!popupPanelView) {
  popupPanelView = app.views.create('.popup-panel-view', {}) 
}

if (!popupPageView) {
  popupPageView = app.views.create('.popup-page-view', {
  	url: '/popup-home/',
    routes: [
      {
        path: '/popup-home/',
        component: {
          template: `
<div data-name="popup-home" class="page">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner">
    	<div class="title">Home Popup Page</div>
    </div>
  </div>
<div class="page-content">


<div class="list media-list">
<ul>
<li>
<a href="#" class="item-link item-content">
<div class="item-media"><img src="https://cdn.framework7.io/placeholder/people-160x160-1.jpg" width="80"/></div>
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">Yellow Submarine</div>
<div class="item-after">$15</div>
</div>
<div class="item-subtitle">Beatles</div>
<div class="item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.</div>
</div></a></li>
<li>
<a href="#" class="item-link item-content">
<div...