title: How to use Onsen UI tabbar with Vue single file components
body: <p>I'm using Vue Onsen UI and trying to render a Vue single file component for each tab.</p>
  
  <p>In the <a href="https://onsen.io/v2/api/vue/v-ons-tabbar.html" rel="nofollow noreferrer">documentation here</a>, they make use of template in a single page. Which is not very reusable. I want to be able to import custom component and render that.</p>
  
  <p>Here is something that I'm trying to do which doesn't seem to work.</p>
  
  <pre><code>&lt;template lang="html"&gt;
    &lt;v-ons-page&gt;
      &lt;!-- top tab bar --&gt;
      &lt;v-ons-tabbar position="top" :index="0"&gt;
        &lt;v-ons-tab label="Browse" page="TaskList"&gt;
        &lt;/v-ons-tab&gt;
        &lt;v-ons-tab label="Second"&gt;
        &lt;/v-ons-tab&gt;
      &lt;/v-ons-tabbar&gt;
    &lt;/v-ons-page&gt;
  &lt;/template&gt;
  
  
  &lt;script&gt;
  import TaskList from './TaskList';
  
  export default {
    template: '#main',
    components: {
      'task-list': TaskList,
    },
  };
  &lt;/script&gt;
  
  &lt;style lang="scss"&gt;
  &lt;/style&gt;
  </code></pre>
  
  <p>Can you suggest anything that I should try?</p>