やりたいこと

htmlファイルを開くことで、3つのタブをもつ画面を表示するようにしたい

現状

ページのタイトルは表示されるもののタブバーが表示されないため、表示する方法をご教示いただけますと幸いです。

#ソース
onsen UIのサンプルコードをもとに作成いたしました。

<!DOCTYPE html>
<html>
  <head>
      <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
      <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
      <script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"
    />
  </head>
  <body>
      <template id="main">
          <v-ons-page>
            <v-ons-toolbar>
              <div class="center">{{ title }}</div>
            </v-ons-toolbar>

            <v-ons-tabbar swipeable position="auto"
              :tabs="tabs"
              :visible="true"
              :index.sync="activeIndex"
            >
            </v-ons-tabbar>
          </v-ons-page>
        </template>

        <template id="home">
          <v-ons-page>
            <p style="text-align: center">
              Welcome home.<br><br>{{ myProp }}
            </p>
          </v-ons-page>
        </template>

        <template id="news">
          <v-ons-page>
            <p style="text-align: center">
              Some news here.
            </p>
          </v-ons-page>
        </template>

        <template id="settings">
          <v-ons-page>
            <p style="text-align: center">
              Change the settings.
            </p>
          </v-ons-page>
        </template>

        <div id="app"></div>

    <!-- Vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>

    <script>
      const homePage = {
        template: "#home",
        props: ["myProp"]
      };

      const newsPage = {
        template: "#news"
      };

      const settingsPage = {
        template: "#settings"
      };

      new Vue({
        el: "#app",
        template: "#main",
        data() {
          return {
            activeIndex: 0,
            tabs: [
              {
                icon: "ion-home",
                label: "Home",
                page: homePage,
                props: {
                  myProp: "This is a page prop!"
                },
                key: "homePage"
              },
              {
                icon: "ion-ios-bell",
                label: "News",
                page: newsPage,
                badge: 7,
                key: "newsPage"
              },
              {
                icon: "ion-ios-settings",
                label: "Settings",
                page: settingsPage,
                key: "settingsPage"
              }
            ]
          };
        },
        methods: {
          // md() {
          //   return this.$ons.platform.isAndroid();
          // }
        },
        computed: {
          title() {
            return this.tabs[this.activeIndex].label;
          }
        }
      });
    </script>
  </body>
</html>